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

введение сегментированные кнопки — это компонент пользовательского интерфейса, представленный в material 3, который позволяет пользователям выбирать от двух до пяти вариантов они особенно полезны, когда вы хотите предложить набор эксклюзивных или неэксклюзивных вариантов в чистом, организованном виде в этом руководстве мы рассмотрим, как использовать сегментированные кнопки в приложении flutter, используя back4app в качестве бэкенда для хранения и управления выбранными вариантами предварительные требования перед началом убедитесь, что у вас есть следующее учетная запись back4app зарегистрируйтесь для получения бесплатной учетной записи на back4app com https //www back4app com настроенная среда разработки flutter на вашем локальном компьютере следуйте руководству по установке flutter https //flutter dev/docs/get started/install , если вы еще не настроили ее базовые знания dart, виджетов flutter и использования back4app для бэкенд сервисов шаг 1 – настройка вашего бэкенда back4app создайте проект back4app войдите в свою учетную запись back4app https //www back4app com/ и создайте новый проект создайте классы parse для этого руководства создайте класс parse с именем userpreferences для хранения выбранных вариантов из сегментированных кнопок username (string) имя пользователя selectedoption (string) вариант, выбранный пользователем получите свои учетные данные back4app перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения flutter к back4app шаг 2 – настройка проекта flutter создайте новый проект flutter откройте терминал или командную строку и выполните flutter create segmented button example добавьте зависимости откройте pubspec yaml и добавьте следующие зависимости dependencies flutter sdk flutter parse server sdk flutter latest version запустите flutter pub get для установки этих зависимостей инициализируйте parse в вашем приложении в lib/main dart , инициализируйте sdk parse 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 , добавьте новый виджет для отображения и обработки сегментированных кнопок 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 https //flutter dev/docs , а для советов по интеграции с бэкендом посетите документацию back4app https //www back4app com/docs удачного кодирования!