Больше
Создание выпадающих меню в Flutter с данными из Back4app

11min
Введение
Когда-либо испытывали трудности с созданием динамических выпадающих меню в Flutter? Вы не одиноки! В этом руководстве мы проведем вас через создание выпадающего меню, которое получает свои варианты из бэкенда Back4app. Это проще, чем вы могли подумать, и к концу у вас будет гибкое, основанное на данных выпадающее меню в вашем приложении Flutter.
Представьте, что вы создаете приложение для службы доставки пиццы. Доступные начинки могут часто меняться, поэтому жесткое кодирование их не идеально. Вот где полезно выпадающее меню, управляемое бэкендом!
Предварительные требования
Прежде чем мы начнем, убедитесь, что у вас есть учетная запись Back4app (не волнуйтесь, регистрация бесплатна) и установлен Flutter на вашем компьютере. Если вы новичок в Flutter, ознакомьтесь с их руководством по установке. О, и базовое понимание Dart и виджетов Flutter поможет, но мы проведем вас через сложные моменты!
Шаг 1 – Настройка вашего бэкенда Back4app
Давайте настроим наш бэкенд Back4app. Не волнуйтесь, это не так страшно, как кажется!
Сначала войдите в свою учетную запись Back4app. Нет учетной записи? Не проблема! Перейдите на Back4app.com и зарегистрируйтесь – это бесплатно и быстро.
Создайте новый проект бэкенда. Вы можете назвать его как-нибудь креативно, например, 'AwesomeDropdownData', или просто выбрать 'DropdownExample', если сегодня вы менее креативны.
Теперь давайте создадим класс Parse. Подумайте об этом как о специальной таблице для наших вариантов выпадающего меню. Мы назовем его 'Options' (оригинально, правда?). Добавьте столбец с именем optionValue (String), чтобы хранить наши варианты выпадающего меню.
Время добавить немного тестовых данных! Давайте заполним наш класс 'Options' несколькими вкусными начинками для пиццы:
Пепперони
Грибы
Дополнительный сыр
И последнее, но не менее важное, получите свой идентификатор приложения и ключ клиента из настроек проекта. Нам нужно будет это, чтобы подключить наше приложение Flutter к Back4app.
Шаг 2 – Настройка проекта Flutter
Давайте создадим новый проект Flutter. Откройте терминал, найдите уютное место для вашего проекта и выполните:
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
Теперь давайте добавим некоторые зависимости. Откройте pubspec.yaml и добавьте эти строки:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
﻿
Не забудьте выполнить flutter pub get для получения этих пакетов!
Теперь давайте скажем нашему приложению Flutter, как общаться с Back4app. Откройте lib/main.dart и добавьте этот код. Не беспокойтесь, если это выглядит немного устрашающе – мы разберем это!
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: DropdownMenuScreen(),
    );
  }
}
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: DropdownMenuScreen(),
    );
  }
}
﻿
Не забудьте заменить 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши реальные учетные данные Back4app. Это как секретное рукопожатие между вашим приложением и Back4app!
Шаг 3 – Создание выпадающего меню
Теперь самое интересное – давайте создадим наше выпадающее меню!
Вот код для нашего DropdownMenuScreen виджета. Это может показаться сложным, но мы разберем его по частям, обещаю!
Dart
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _fetchOptions();
  }

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _fetchOptions();
  }

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
Уф, это кусок кода! Но не паникуйте – давайте разберем его по частям. Этот виджет выполняет несколько ключевых задач для нас:
Он обращается к нашему бэкенду Back4app и получает наш список опций. Подумайте об этом как о официанте, который приносит вам меню в ресторане.
Пока он загружает данные, он показывает индикатор загрузки. Потому что никто не любит смотреть на пустой экран, верно?
Как только он получит опции, он отображает их в красивом выпадающем меню.
Когда вы выбираете опцию, он запоминает ваш выбор.
Круто, правда? И лучшая часть в том, что каждый раз, когда вы обновляете опции в Back4app, ваше приложение автоматически покажет новый список при следующей загрузке. Магия!
Шаг 4 – Запуск приложения
Время истины! Запустите ваше приложение с помощью flutter run. Если все пройдет хорошо, вы должны увидеть выпадающее меню, заполненное начинками для пиццы, которые мы сохранили в Back4app.
Давайте, выберите начинку. Заметьте, как она обновляется мгновенно? Это сила управления состоянием в Flutter!
Лучшие практики для выпадающих меню с интеграцией бэкенда
Обработка состояний загрузки: Как вы видели в нашем примере, мы используем индикатор загрузки во время получения данных. Это как включить музыку, пока ваши гости ждут ужина – это просто улучшает впечатление!
Обработка ошибок: В реальном приложении вы захотите добавить обработку ошибок. Что если интернет не работает? Или Back4app дремлет? Всегда планируйте на случай неожиданностей!
Используйте пагинацию: Если ваш список выпадающих меню становится длиннее списка ингредиентов в пицце в стиле Чикаго, подумайте о реализации пагинации. Ваши пользователи (и их устройства) будут вам благодарны.
Заключение
Вы только что создали умное, управляемое бэкендом выпадающее меню в Flutter! 🎉 Почему бы не попробовать расширить этот пример? Может быть, добавьте кнопку, которая добавляет выбранную начинку в заказ пиццы, или попробуйте отобразить варианты в другом компоненте пользовательского интерфейса. Небо – это предел!
И помните, если вы застряли или у вас есть вопросы, сообщества Flutter и Back4app очень полезны. Не стесняйтесь просить о помощи!
Теперь идите и создавайте потрясающие, динамичные пользовательские интерфейсы! 💪
Для получения дополнительной информации ознакомьтесь с документацией Flutter и документацией Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как использовать Uint8List в Flutter и сохранять его на сервере с помощью Back4app
Flutter, Google Wallet и Back4App: Учебник по приложению для экологических наград