Сеть во Flutter - Краткое руководство

При разработке мобильных приложений это неизбежно: использование API. Как мы можем эффективно использовать эти API во Flutter? После нескольких производственных проектов нам удалось найти довольно хорошую установку, так что давайте посмотрим!

Перво-наперво: какой REST API?

Давайте настроим наш API, прежде чем начинать наш проект Flutter. В этом примере мы будем использовать API OpenWeatherMap. Просто нажмите на ссылку и обязательно зарегистрируйтесь и получите свой API_KEY, поскольку он нам понадобится для выполнения вызовов API.

Вот и все! После того, как вы зарегистрировались и получили свой ключ API, мы можем приступить к настройке нашего приложения Flutter.

Начало работы: дооснащение ?!

Предполагая, что у вас уже есть запущенный и работающий проект Flutter, мы добавим наши первые зависимости в наш pubspec.yaml файл, чтобы настроить наш клиент API:

dependencies: 
  dio: 3.0.9
  retrofit: 1.3.4
dev_dependencies:
  retrofit_generator: 1.3.4+1
  build_runner: 1.9.0
  • Dio - это наш Http-клиент, который обрабатывает соединение за нас.
  • Retrofit - это клиент Dio, который упрощает использование REST API. Думаю, те, кто пришел с Android, будут рады увидеть это во Flutter 🤓
  • Средство выполнения сборки используется для генерации кода в Dart, помимо pub.

Просто flutter pub get и приступайте к настройке клиента!

Мы добавим новый класс и определим его как RestApi с базовым URL через аннотацию.

Обратите внимание на part под импортом: он используется для генерации кода. Продолжайте и выполните следующее:

flutter packages pub run build_runner build 

Это будет использовать средство запуска сборки и сгенерировать код для нашего клиента в классе, который мы определили в файле part. Вы должны увидеть, как он появляется в том же пакете, что и класс API, после завершения сборки runner.

Настройка клиента API, готово ✅

Хотите определить базовый URL-адрес через Dio? Вы действительно можете! Базовый URL-адрес, определенный в Dio, имеет более низкий приоритет, чем тот, который определен в аннотации, но оставление базового URL-адреса в аннотации пустым приведет к тому, что клиент будет использовать тот, который определен в Dio 👌

Разбор JSON: определение нашей модели

Давайте начнем с определения модели ответа, прежде чем реализовывать наш первый вызов API. В этом примере мы не будем сосредотачиваться на полном ответе, а обратимся к той части, которая содержит текущую температуру:

Итак, теперь, когда мы знаем, что мы получим, давайте добавим зависимость для начала синтаксического анализа ответа JSON:

json_serializable: 3.3.0

Потрясающие! Теперь давайте приступим к созданию классов для представления ответа. Мы начнем с класса погодных условий и создадим еще один класс для основного блока. Просто реализуйте каждое поле и аннотируйте класс с помощью @JsonSerializable().

Круто, просто снова запустите build runner, и теперь мы сможем проанализировать текущую температуру из ответа 😄

Добавление вашего первого вызова API

Итак, давайте теперь вернемся к нашему клиенту. Нам понадобится GET запрос, чтобы получить текущую температуру. Изучив документацию по нашему API, нам нужно будет добавить несколько заголовков в запрос и добавить параметр запроса для запрошенного местоположения. К счастью, с Retrofit нам все это очень легко сделать!

Я думаю, что фрагмент кода говорит сам за себя. Мы можем использовать аннотацию, чтобы определить, какой тип запроса мы хотим выполнить (получить, опубликовать, поместить и т. Д.), Использовать аннотацию для добавления дополнительных заголовков и аннотировать параметры, чтобы определить его как параметр запроса. Следует рассмотреть большинство вариантов использования, посмотрите документацию, чтобы узнать, соответствует ли она вашим потребностям!

Определение заголовков для каждого вызова может стать довольно повторяющимся, поэтому убедитесь, что вы настроили Dio для всех общих вещей как можно больше!

Звонок

Вот и все! Нам просто нужно все инициализировать и выполнить вызов.

Я хотел бы отметить, что мы используем локатор сервисов для получения зависимостей, таких как Dio или клиент API, на протяжении всего нашего проекта. Я очень рекомендую использовать для этого Get it, это здорово!

Готово! Надеюсь, вы поняли суть. Модернизация упростила реализацию вызовов, а автоматическое преобразование типов также является приятным преимуществом по сравнению с обработкой всего через Dio, как мы делали здесь, в PINCH. Полный пример можно найти в проекте Github ниже.

Будьте здоровы, оставайтесь в безопасности и продолжайте программировать 🐦