Добавьте Firebase в свое приложение Flutter

Предпосылки

• Установите предпочитаемый вами редактор или IDE .

• Установите Flutter для вашей операционной системы, включая следующее:

  • Flutter SDK
  • Поддерживающие библиотеки
  • Программное обеспечение и SDK для конкретных платформ

• Войдите в Firebase, используя свою учетную запись Google.

Если у вас еще нет приложения Flutter, вы можете пройти курс «Начало работы: тест-драйв» , чтобы создать новое приложение Flutter с помощью предпочитаемого вами редактора или IDE.

Шаг 1 : Установите необходимые инструменты командной строки

1. Если вы еще этого не сделали, установите Firebase CLI .

2. Войдите в Firebase, используя свою учетную запись Google, выполнив следующую команду:

   firebase login
   

3. Установите FlutterFire CLI, выполнив следующую команду из любого каталога:

   dart pub global activate flutterfire_cli
   

Шаг 2 : Настройте свои приложения для использования Firebase

Используйте FlutterFire CLI для настройки приложений Flutter для подключения к Firebase.

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

flutterfire configure

Шаг 3 : Инициализируйте Firebase в вашем приложении

1. Из каталога проекта Flutter выполните следующую команду, чтобы установить основной плагин:

   flutter pub add firebase_core
   

2. В каталоге проекта Flutter выполните следующую команду, чтобы убедиться, что конфигурация Firebase вашего приложения Flutter актуальна:

   flutterfire configure
   

3. В файле lib/main.dart импортируйте основной плагин Firebase и файл конфигурации, который вы сгенерировали ранее:

   import 'package:firebase_core/firebase_core.dart';
   import 'firebase_options.dart';
   

4. Также в файле lib/main.dart инициализируйте Firebase, используя объект DefaultFirebaseOptions , экспортированный файлом конфигурации:

   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp(
     options: DefaultFirebaseOptions.currentPlatform,
   );
   runApp(const MyApp());
   

5. Перестройте свое приложение Flutter:

   flutter run
   

Если вы предпочитаете использовать демонстрационный проект, вы можете запустить эмулятор Firebase и в файле lib/main.dart инициализировать Firebase, используя demoProjectId (он должен начинаться с demo- ):

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

Шаг 4 : Добавьте плагины Firebase

Доступ к Firebase в приложении Flutter осуществляется через различные плагины Firebase Flutter , по одному для каждого продукта Firebase (например: Cloud Firestore , Authentication , Analytics и т. д.).

Поскольку Flutter — кроссплатформенный фреймворк, каждый плагин Firebase совместим с платформами Apple, Android и веб-приложениями. Таким образом, если вы добавите любой плагин Firebase в своё приложение Flutter, он будет использоваться версиями приложения для Apple, Android и веб-приложений.

Вот как добавить плагин Firebase Flutter:

1. Из каталога проекта Flutter выполните следующую команду:

   flutter pub add PLUGIN_NAME

2. Из каталога проекта Flutter выполните следующую команду:

   flutterfire configure
   

   Выполнение этой команды гарантирует, что конфигурация Firebase вашего приложения Flutter актуальна, а для Crashlytics и Performance Monitoring на Android добавит в ваше приложение требуемые плагины Gradle.

3. После завершения пересоберите свой проект Flutter:

   flutter run
   

Всё готово! Ваши приложения Flutter зарегистрированы и настроены для использования Firebase.

Доступные плагины

^{1 Firebase AI Logic ранее назывался « Vertex AI in Firebase » с плагином firebase_vertexai .}

Попробуйте пример приложения с Analytics

Как и все пакеты, плагин firebase_analytics поставляется с примером программы .

1. Откройте приложение Flutter, которое вы уже настроили для использования Firebase (см. инструкции на этой странице).

2. Откройте каталог lib приложения, затем удалите существующий файл main.dart .

3. Из репозитория примеров программ Google Analytics скопируйте и вставьте следующие два файла в каталог lib вашего приложения:

   • main.dart
   • tabs_page.dart

4. Запустите приложение Flutter.

5. Перейдите к проекту Firebase вашего приложения в консоли Firebase , затем нажмите «Аналитика» в левой навигационной панели.

   1. Нажмите «Панель мониторинга» . Если Analytics работает корректно, на панели «Пользователи, активные за последние 30 минут» отображается активный пользователь (заполнение этой панели может занять некоторое время).

   2. Нажмите DebugView . Включите эту функцию, чтобы увидеть все события, сгенерированные примером программы.

Дополнительную информацию о настройке Analytics можно найти в руководствах по началу работы для iOS+ , Android и веб-приложений .

Заметки о создании веб-приложений

Поддержка доверенных типов

Firebase SDK для Flutter поддерживает использование доверенных типов для предотвращения межсайтовых атак (XSS) на стороне DOM (клиента). При включении принудительного применения доверенных типов для вашего приложения Firebase SDK внедряет свои скрипты в DOM, используя настраиваемые политики доверенных типов, называемые flutterfire-firebase_core , flutterfire-firebase_auth и т. д.

Отключить автоматическое внедрение Firebase JavaScript SDK

По умолчанию Firebase Flutter SDK автоматически внедряет Firebase JavaScript SDK при сборке для веб-приложений. Если вы не хотите, чтобы Firebase JavaScript SDK внедрялся автоматически, вы можете сделать следующее:

1. Игнорируйте скрипт автоматического внедрения, добавив следующее свойство в тег <script> в файле web/index.html вашего проекта Flutter:

   <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
   <!-- Put in the names of all the plugins you wish to ignore: -->
   window.flutterfire_ignore_scripts = ['analytics', 'firestore'];
   

2. Загрузите скрипт вручную, используя один из следующих способов:

   • Добавьте SDK явно в файл web/index.html внутри обратного вызова window.addEventListener :

       window.addEventListener('load', async function (ev) {
         window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-firestore.js");
         window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/12.7.0/firebase-analytics.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

   • Или загрузите код Firebase JavaScript SDK плагина из домена «gstatic» и сохраните его в файле JavaScript, который будет храниться в вашем проекте и загружаться вручную:

       // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
       window.addEventListener('load', async function (ev) {
         window.firebase_analytics = await import("./my-analytics.js");
         window.firebase_firestore = await import("./my-firestore.js");
     
         _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
           // rest of the code
     

Следующие шаги

• Получите практический опыт работы с Firebase Flutter Codelab .

• Подготовьтесь к запуску вашего приложения:

  • Настройте оповещения о бюджете для вашего проекта в консоли Google Cloud .
  • Отслеживайте панель использования и выставления счетов в консоли Firebase , чтобы получить общую картину использования вашего проекта в различных службах Firebase.
  • Ознакомьтесь с контрольным списком запуска Firebase .