Больше
Как использовать сегментированные кнопки в Flutter с Back4app

10min
Введение
Сегментированные кнопки — это компонент пользовательского интерфейса, представленный в Material 3, который позволяет пользователям выбирать от двух до пяти вариантов. Они особенно полезны, когда вы хотите предложить набор эксклюзивных или неэксклюзивных вариантов в чистом, организованном виде. В этом руководстве мы рассмотрим, как использовать сегментированные кнопки в приложении Flutter, используя Back4app в качестве бэкенда для хранения и управления выбранными вариантами.
Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter, если вы еще не настроили ее.
Базовые знания Dart, виджетов Flutter и использования Back4app для бэкенд-сервисов.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте классы Parse: Для этого руководства создайте класс Parse с именем UserPreferences для хранения выбранных вариантов из сегментированных кнопок:
username (String): Имя пользователя.
selectedOption (String): Вариант, выбранный пользователем.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка проекта Flutter
Создайте новый проект Flutter: Откройте терминал или командную строку и выполните:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
Запустите flutter pub get для установки этих зависимостей.
Инициализируйте Parse в вашем приложении: В lib/main.dart, инициализируйте SDK Parse:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PreferenceScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PreferenceScreen(),
    );
  }
}
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши фактические учетные данные Back4app.
Шаг 3 – Реализация сегментированных кнопок
Создайте виджет PreferenceScreen: В lib/main.dart, добавьте новый виджет для отображения и обработки сегментированных кнопок:
Dart
class PreferenceScreen extends StatefulWidget {
  @override
  _PreferenceScreenState createState() => _PreferenceScreenState();
}

class _PreferenceScreenState extends State<PreferenceScreen> {
  String? _selectedOption;
  final List<ButtonSegment<String>> _options = [
    ButtonSegment(value: 'Option 1', label: Text('Option 1')),
    ButtonSegment(value: 'Option 2', label: Text('Option 2')),
    ButtonSegment(value: 'Option 3', label: Text('Option 3')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Preferences')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SegmentedButton<String>(
              segments: _options,
              selected: _selectedOption == null ? {} : {_selectedOption!},
              onSelectionChanged: (newSelection) {
                setState(() {
                  _selectedOption = newSelection.first;
                });
                _savePreference(_selectedOption!);
              },
            ),
            SizedBox(height: 20),
            if (_selectedOption != null)
              Text('Selected: $_selectedOption', style: TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }

  Future<void> _savePreference(String selectedOption) async {
    final userPreference = ParseObject('UserPreferences')
      ..set('username', 'test_user') // This would normally come from user data
      ..set('selectedOption', selectedOption);

    await userPreference.save();
  }
}
class PreferenceScreen extends StatefulWidget {
  @override
  _PreferenceScreenState createState() => _PreferenceScreenState();
}

class _PreferenceScreenState extends State<PreferenceScreen> {
  String? _selectedOption;
  final List<ButtonSegment<String>> _options = [
    ButtonSegment(value: 'Option 1', label: Text('Option 1')),
    ButtonSegment(value: 'Option 2', label: Text('Option 2')),
    ButtonSegment(value: 'Option 3', label: Text('Option 3')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Preferences')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SegmentedButton<String>(
              segments: _options,
              selected: _selectedOption == null ? {} : {_selectedOption!},
              onSelectionChanged: (newSelection) {
                setState(() {
                  _selectedOption = newSelection.first;
                });
                _savePreference(_selectedOption!);
              },
            ),
            SizedBox(height: 20),
            if (_selectedOption != null)
              Text('Selected: $_selectedOption', style: TextStyle(fontSize: 16)),
          ],
        ),
      ),
    );
  }

  Future<void> _savePreference(String selectedOption) async {
    final userPreference = ParseObject('UserPreferences')
      ..set('username', 'test_user') // This would normally come from user data
      ..set('selectedOption', selectedOption);

    await userPreference.save();
  }
}
﻿
Этот код определяет простой интерфейс с сегментированной кнопкой, позволяющей пользователям выбирать из трех вариантов. Выбранный вариант сохраняется в Back4app каждый раз, когда выбор изменяется.
Шаг 4 – Запуск приложения
Запустите ваше приложение с помощью flutter run. Вы должны увидеть сегментированные кнопки на экране. Выбор варианта обновит состояние и сохранит выбор в Back4app.
Проверьте данные в Back4app войдя в свою панель управления Back4app и проверив класс UserPreferences. Вы должны увидеть записи, соответствующие вашим выборам из приложения Flutter.
Заключение
В этом учебном пособии мы рассмотрели, как реализовать и использовать сегментированные кнопки в Flutter. Мы также продемонстрировали, как интегрировать Flutter с Back4app для хранения пользовательских предпочтений. Сегментированные кнопки предлагают чистый и интуитивно понятный способ представления пользователям нескольких вариантов, и в сочетании с мощным бэкендом, таким как Back4app, они могут значительно улучшить пользовательский опыт вашего приложения.
Для получения дополнительной информации о виджетах Flutter, ознакомьтесь с документацией Flutter, а для советов по интеграции с бэкендом посетите документацию Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание и использование расширения Flutter DevTools с Back4app
Сбор отзывов пользователей в Flutter с использованием компонента обратной связи и хранения данных на Back4app