Привет, народ. В этом посте я продемонстрирую, как легко получать данные из базового 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.