Привет, народ. В этом посте я продемонстрирую, как легко получать данные из базового REST API во Flutter с помощью Dart.
Вот как будет выглядеть наше приложение в конце урока 👇.
Для этого сообщения мы будем использовать API бесплатных ежедневных цитат QUOTES, который возвращает ответ в формате JSON, и мы будем интересоваться только цитатой и автором. Я рекомендую вам ознакомиться со структурой ответа, прежде чем мы углубимся в руководство. Если вы новичок в структуре JSON, кратко просмотрите этот Средний пост.
Создайте проект Flutter с помощью flutter run projectname
, откройте проект в своем редакторе и откройте файл main.dart
, созданный в папке lib
, и удалите класс HomePage
с отслеживанием состояния и комментарии в нем.
Сначала нам нужно изменить наши файлы pubspec.yaml
и main.dart
, чтобы добавить HTTP-пакет Dart в качестве зависимости и выполнить необходимый импорт соответственно, как показано в приведенных ниже фрагментах.
Запустите flutter packages get
, чтобы загрузить пакет
Поняв структуру нашего ответа JSON, мы хотим создать базовый объект Dart, чтобы удерживать наш ответ, чтобы сделать синтаксический анализ и обработку ответа в нашем приложении без проблем. Для этого создайте класс Quote
с конструктором в файле main.dart
, но вне класса MyApp
, как показано ниже.
Ваш main.dart
файл теперь должен выглядеть так 👇
Теперь, когда мы создали объект для хранения цитаты, давайте перейдем к получению цитаты и ее автора из API с помощью запроса GET. Мы делаем это, создавая метод getQuote()
в нашем классе MyApp
в файле main.dart, как показано ниже.
- Метод возвращает
Future<Quote>
, поскольку выполняемая в нем операция не возвращает значение Quote сразу из-за сетевых процессов в этом случае. По завершении операции результат возвращается и сохраняется в Future. - Dart предоставляет
http
класс, который предоставляет интерфейсы для готовых HTTP-запросов. - Использование свойства
header
необязательно, поскольку в этом случае оно указывает только на то, что мы хотим принимать ответ только в формате JSON. Есть много возможностей для получения информации о нашем запросе, которая может быть отправлена с использованием заголовков.
Получив наш ответ с помощью функции getQuote()
выше и проанализировав его с помощью класса Quote
, теперь мы можем отобразить его с помощью FutureBuilder
widget в нашем приложении flutter.
FutureBuilder - это виджет Flutter, который возвращает другой виджет на основе результата выполнения Future. Он служит мостом между Futures и пользовательским интерфейсом виджета.
Ниже показано, как будет выглядеть наш main.dart
файл после внесения изменений в метод Widget build()
для отображения цитаты.
Существует бесконечное количество вариантов использования извлечения данных из Интернета с помощью REST API во Flutter, и есть разные подходы к этому.
Оставляйте свои вопросы и предложения в разделе комментариев, если они у вас есть, и не забывайте хлопать в ладоши👏 😄.
Эта история публикуется в Noteworthy, куда ежедневно приходят более 10 000 читателей, чтобы узнать о людях и идеях, формирующих наши любимые продукты.
Подпишитесь на нашу публикацию, чтобы увидеть больше историй о продуктах и дизайне, представленных командой Journal.