Can't link flutter web application to firebase project / infinite loading

Question

I have a problem when I try to link my Flutter web project to my Firebase. I add the elements, imports and SDK and when I touch the main.dart to initialize the firebase functions, even if the code doesn't show any error, when I launch the application from my IDE with google, I'm facing an infinite loading screen. And sometimes there is not even the blue loading bar. All the SDK, my IDE and my frameworks are up to date in stable version.

I have configured a firebase project with only this application and I Initialized a firestore database like I saw in the CRUD that I followed.

link of the CRUD: https://www.youtube.com/watch?v=Ue_dIKOMcb4&t=1009s

But I don't think it come from the project because I can't even initialize Firebase in the default flutter counter new application.

And in my index.HTML, in the firebase config paragraph, my API key is underlined in RED

Maybe I use the wrong methode to initialize Firebase fuctions in my project, so please can someone show me how to do.

Here's my pubspec.yaml:

name: flutter_web_diary
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.6.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.0.4
  firebase_core: "^1.7.0"
  cloud_firestore: "^2.5.3"

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

My idex.HTML :




  
  

  
  
  

  
  
  
  
  

  flutter_application_1

and my main.dart:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_web_diary/diary_card.dart';
import 'package:flutter_web_diary/diary_entry_model.dart';
import 'package:flutter_web_diary/top_bar_title.dart';
import 'package:provider/provider.dart';

import 'diary_entry_page.dart';

// Import the firebase_core plugin
import 'package:firebase_core/firebase_core.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

/// We are using a StatefulWidget such that we only create the [Future] once,
/// no matter how many times our widget rebuild.
/// If we used a [StatelessWidget], in the event where [App] is rebuilt, that
/// would re-initialize FlutterFire and make our application re-enter loading state,
/// which is undesired.
class App extends StatefulWidget {
  // Create the initialization Future outside of `build`:
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State {
  /// The future is part of the state of our widget. We should not call `initializeApp`
  /// directly inside [build].
  final Future _initialization = Firebase.initializeApp();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Initialize FlutterFire:
      future: _initialization,
      builder: (context, snapshot) {
        // Check for errors
        if (snapshot.hasError) {
          return Text(snapshot.error.toString());
        }

        // Once complete, show your application
        if (snapshot.connectionState == ConnectionState.done) {
          return MyApp();
        }

        // Otherwise, show something whilst waiting for initialization to complete
        return CircularProgressIndicator();
      },
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Refer to https://firebase.flutter.dev

    final diaryCollection = FirebaseFirestore.instance.collection('diaries');
    final diaryStream = diaryCollection.snapshots().map((snapshot) {
      return snapshot.docs.map((doc) => DiaryEntry.fromDoc(doc)).toList();
    });
    return StreamProvider>(
      create: (_) => diaryStream,
      child: MaterialApp(
        title: 'My Diary',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.indigo).copyWith(secondary: Colors.pink),
        ),
        initialRoute: '/',
        routes: {
          '/': (context) => MyHomePage(),
          '/new-entry': (context) => DiaryEntryPage.add(),
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    final diaryEntries = Provider.of>(context);
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(94.0),
          child: TopBarTitle('Diary Entries'),
        ),
        elevation: 0,
      ),
      body: Center(
        child: SizedBox(
          width: MediaQuery.of(context).size.width * 3 / 5,
          child: ListView(
            children: [
              SizedBox(height: 40),
              if (diaryEntries != null)
                for (var diaryData in diaryEntries)
                  DiaryCard(diaryEntry: diaryData),
              if (diaryEntries == null)
                Center(child: CircularProgressIndicator()),
            ],
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
      floatingActionButton: FloatingActionButton(
        elevation: 1.5,
        onPressed: () => Navigator.of(context).pushNamed('/new-entry'),
        tooltip: 'Add To Do',
        child: Icon(Icons.add),
        backgroundColor: Theme.of(context).colorScheme.secondary,
      ),
    );
  }
}

Arthur · Accepted Answer

Okay I just changed the way that I initialize my project in my main.dart

Like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(App());
}

instead of that:

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

And i put my firestore database in Test mode.

Can't link flutter web application to firebase project / infinite loading

Answers (2)

Related Questions

Can&#39;t link flutter web application to firebase project / infinite loading

Answers (2)

Related Questions

Can't link flutter web application to firebase project / infinite loading