Aggiungi Firebase alla tua app Flutter

Prerequisiti

• Installa l'editor o l'IDE che preferisci.

• Installa Flutter per il tuo sistema operativo specifico, tra cui:

  • SDK Flutter
  • Librerie di supporto
  • Software e SDK specifici della piattaforma

• Accedi a Firebase utilizzando il tuo Account Google.

Se non hai ancora un'app Flutter, puoi completare la Guida introduttiva: prova per creare una nuova app Flutter utilizzando l'editor o l'IDE che preferisci.

Passaggio 1: installa gli strumenti della riga di comando richiesti

1. Se non l'hai ancora fatto, installa la Firebase CLI.

2. Accedi a Firebase utilizzando il tuo Account Google eseguendo il seguente comando:

   firebase login
   

3. Installa l'interfaccia a riga di comando FlutterFire eseguendo il seguente comando da qualsiasi directory:

   dart pub global activate flutterfire_cli
   

Passaggio 2: configura le app per utilizzare Firebase

Utilizza la CLI FlutterFire per configurare le tue app Flutter in modo che si connettano a Firebase.

Dalla directory del progetto Flutter, esegui il comando seguente per avviare il flusso di lavoro di configurazione dell'app:

flutterfire configure

Passaggio 3: inizializza Firebase nella tua app

1. Dalla directory del progetto Flutter, esegui il seguente comando per installare il plug-in principale:

   flutter pub add firebase_core
   

2. Dalla directory del progetto Flutter, esegui il comando seguente per assicurarti che la configurazione Firebase dell'app Flutter sia aggiornata:

   flutterfire configure
   

3. Nel file lib/main.dart, importa il plug-in Firebase Core e il file di configurazione che hai generato in precedenza:

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

4. Inoltre, nel file lib/main.dart, inizializza Firebase utilizzando l'oggetto DefaultFirebaseOptions esportato dal file di configurazione:

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

5. Ricrea l'applicazione Flutter:

   flutter run
   

Se preferisci utilizzare un progetto dimostrativo, puoi avviare Firebase Emulator e nel file lib/main.dart inizializzare Firebase utilizzando demoProjectId (deve iniziare con demo-):

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

Passaggio 4: aggiungi i plug-in Firebase

Accedi a Firebase nella tua app Flutter tramite i vari plug-in Firebase Flutter, uno per ogni prodotto Firebase (ad esempio: Cloud Firestore, Authentication, Analytics e così via).

Poiché Flutter è un framework multipiattaforma, ogni plug-in Firebase è applicabile per le piattaforme Apple, Android e web. Pertanto, se aggiungi un plug-in Firebase alla tua app Flutter, questo verrà utilizzato dalle versioni Apple, Android e web della tua app.

Ecco come aggiungere un plug-in Firebase Flutter:

1. Dalla directory del progetto Flutter, esegui questo comando:

   flutter pub add PLUGIN_NAME

2. Dalla directory del progetto Flutter, esegui questo comando:

   flutterfire configure
   

   L'esecuzione di questo comando garantisce che la configurazione Firebase della tua app Flutter sia aggiornata e, per Crashlytics e Performance Monitoring su Android, aggiunge i plug-in Gradle richiesti alla tua app.

3. Al termine, ricompila il progetto Flutter:

   flutter run
   

Ecco fatto. Le tue app Flutter sono registrate e configurate per utilizzare Firebase.

Plug-in disponibili

^{1 Firebase AI Logic in precedenza era chiamato "Vertex AI in Firebase" con il plug-in firebase_vertexai.}

Prova un'app di esempio con Analytics

Come tutti i pacchetti, il plug-in firebase_analytics viene fornito con un programma di esempio.

1. Apri un'app Flutter che hai già configurato per utilizzare Firebase (vedi le istruzioni in questa pagina).

2. Accedi alla directory lib dell'app, quindi elimina il file main.dart esistente.

3. Dal Google Analytics repository del programma di esempio, copia e incolla i seguenti due file nella directory lib della tua app:

   • main.dart
   • tabs_page.dart

4. Esegui l'app Flutter.

5. Vai al progetto Firebase della tua app nella console Firebase, poi fai clic su Analytics nel menu di navigazione a sinistra.

   1. Fai clic su Dashboard. Se Analytics funziona correttamente, la dashboard mostra un utente attivo nel pannello "Utenti attivi negli ultimi 30 minuti" (potrebbe essere necessario del tempo prima che questo pannello venga compilato).

   2. Fai clic su DebugView. Attiva la funzionalità per visualizzare tutti gli eventi generati dal programma di esempio.

Per saperne di più sulla configurazione di Analytics, consulta le guide introduttive per iOS+, Android e web.

Note sulla creazione di app web

Supporto di Trusted Types

L'SDK Firebase per Flutter supporta l'utilizzo di Trusted Types per contribuire a prevenire attacchi XSS basati sul DOM (lato client). Quando attivi l'applicazione dei tipi attendibili per la tua app, l'SDK Firebase inserisce i suoi script nel DOM utilizzando criteri personalizzati per i tipi attendibili, denominati flutterfire-firebase_core, flutterfire-firebase_auth e così via.

Disattivare l'inserimento automatico dell'SDK Firebase JavaScript

Per impostazione predefinita, l'SDK Firebase Flutter inserisce automaticamente l'SDK Firebase JavaScript durante la creazione per il web. Se non vuoi che l'SDK Firebase JavaScript venga inserito automaticamente, puoi procedere nel seguente modo:

1. Ignora lo script di inserimento automatico aggiungendo la seguente proprietà all'interno di un tag <script> nel file web/index.html del progetto 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. Carica lo script manualmente utilizzando una delle seguenti alternative:

   • Aggiungi l'SDK in modo esplicito al file web/index.html, all'interno del callback 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
     

   • In alternativa, scarica il codice dell'SDK Firebase JavaScript del plug-in dal dominio "gstatic" e salvalo in un file JavaScript da conservare all'interno del progetto e caricare manualmente:

       // "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
     

Passaggi successivi

• Fai esperienza pratica con il codelab Firebase Flutter.

• Preparati a lanciare la tua app:

  • Configura avvisi di budget per il tuo progetto nella console Google Cloud.
  • Monitora la dashboard Utilizzo e fatturazione nella console Firebase per avere un quadro generale dell'utilizzo del tuo progetto in più servizi Firebase.
  • Esamina l'elenco di controllo per il lancio di Firebase.