Переход на Flutter 1.9: реализация кроссплатформенного входа в Firebase в приложениях Flutter

Я экспериментировал с Flutter Web (он же Hummingbird ранее) с тех пор, как он был анонсирован в Google IO 2019.

я помню отправку запрос на вытягивание чтобы добавить инструкции по запуску примеров веб-приложений Flutter. С тех пор мне нравилось исследовать быстро развивающуюся и постоянно меняющуюся сеть Flutter Web.

Я написал пару статей, чтобы спроектировать и реализовать целевую страницу во Flutter, которая может без проблем работать на всех трех платформах: Android, iOS и в Интернете. Я продолжал улучшать эту целевую страницу, чтобы включить вход с помощью Firebase, FactsBot, тем и так далее.

Пожалуйста, обратитесь к предыдущим статьям по теме ниже:

Посмотреть сопутствующее видео здесь

Введение

В этой статье я покажу вам, как Выпуск флаттера 1.9 упрощает разработку кроссплатформенных приложений Flutter и максимально увеличивает повторное использование кода. я буду использовать мой предыдущий Пример приложения Flutter-to-Fly для демонстрации этого перехода на Flutter 1.9.

Перенос проекта на Flutter 1.9

Существует довольно хорошая документация по переносу существующего проекта на Flutter 1.9 и/или созданию нового проекта Flutter, доступного на официальный сайт флаттера. По сути, вам нужно будет запустить следующие команды в каталоге на один уровень выше каталога вашего проекта:

  $ flutter channel master
  $ flutter upgrade
  $ flutter config --enable-web
  $ cd <into project directory>
  $ flutter create .
  $flutter run -d chrome

ПРИМЕЧАНИЕ: На случай, если вы столкнетесь Проблема с белым экраномвы можете изменить свой канал Flutter на flutter channel dev.

Запуск приложений X-платформы из Android Studio

Начиная с Flutter 1.9, вы можете запускать приложения на Android, iOS и Chrome прямо из Android Studio:

плагины

Развертывание веб-приложения

Для развертывания веб-приложения достаточно одной команды:

$ flutter build web

Команда выше сгенерирует build папка в корневом каталоге. Скопируйте его содержимое в public каталог вашего хостинг-сайта.

URL запуска

До сих пор мы хранили веб- и нативную кодовую базу в отдельных ветках, чтобы по-разному управлять URL-адресом запуска в веб-среде и мобильной среде. Flutter 1.9 позволяет хранить кодовую базу (веб- и мобильную/нативную) в одной ветке и выбирать правильную реализацию, определяя платформу с помощью dart.library.html для веб и dart.library.io для мобильной платформы.

Вы можете организовать свою кодовую базу для plugins как показано ниже, как рекомендовано командой Flutter:

плагины

На скриншоте выше показаны два плагина:

url_launcher: управление URL-адресами запуска в зависимости от целевой платформы. См. полный исходный код здесь
firetop: управляет функциями, связанными с Firebase, для мобильных и веб-платформ. Мы углубимся в этот плагин в следующем разделе. См. полный исходный код здесь.

pubspec.yaml:

Следующие зависимости необходимы для запуска URL-адресов из приложения Flutter.

dependencies:
  universal_html: ^1.1.0
  url_launcher: ^5.1.2

Давайте посмотрим содержимое url_launcher.dart ниже. Именно здесь определяется целевая платформа и используется соответствующая реализация.

export 'unsupported.dart'
    if (dart.library.html) 'web.dart'
    if (dart.library.io) 'mobile.dart';

Команда Flutter работает над плагин fb_auth для обеспечения кроссплатформенной поддержки Firebase.

pubspec.yaml:

Следующая зависимость необходима для добавления кроссплатформенной поддержки Firebase.

dependencies: fb\_auth: any

Давайте оформим заказ fire_auth_service.dart ниже. Пожалуйста, обратитесь к исходный код в репозитории Gihub для ссылки на другие файлы.

export 'unsupported.dart'
    if (dart.library.html) 'web.dart'
    if (dart.library.io) 'mobile.dart';

Вы бы заметили, что web.dart а также mobile.dart очень похожи и используют FBAuth() для доступа к функциям Firebase. Нам по-прежнему нужно держать их отдельно, потому что не все доступно в fb_auth плагин. Например, Поддержка FireStore отсутствует для флаттер веб.

Вывод

Я сделал эту статью короткой, чтобы кратко рассказать о наиболее важных изменениях, происходящих в мире Flutter Web. В этой статье рассказывается о том, как начать слияние ветвей веб-кода Flutter с собственным кодом, а также о том, как ориентироваться на код, специфичный для платформы. Мы увидели, как можно запускать URL-адреса для веб-приложений и мобильных приложений, используя один и тот же код. Наконец, мы рассмотрели интеграцию с Firebase из единой базы кода.

Продолжай трепетать!