Use Future with MaterialApp.router in main.dart

Viewed 635

SITUATION: I'm trying to set up firebase with my flutter project by following this guide by the firebase team.

PROBLEM: In the final steps of the guide, a FutureBuilder widget is passed to the 'home' property of a MaterialApp widget. However, MaterialApp.router does not have a 'home' property, so I am struggling to complete the set-up (am new to flutter :-)).

Any thoughts on how to solve this problem?

// Import libraries
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:firebase_core/firebase_core.dart';

// Import custom widgets
import 'views/landing_page.dart';
import 'views/info_page.dart';


// Initiate the app
Future<void> main() async {
  // Ensure all services are loaded before app is started
  WidgetsFlutterBinding.ensureInitialized();
  // Run the app
  runApp(MyApp());
}


// Define the MyApp widget
class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final Future<FirebaseApp> _fbApp = Firebase.initializeApp();

  // Build the website
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
      debugShowCheckedModeBanner: false,
    );
  }

  // Declare routing information
  final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const LandingPage(),
      ),
      GoRoute(
        path: '/info',
        builder: (context, state) => const InfoPage(),
      ),
    ],
  );
}
1 Answers

figured this one out on my own. I did indeed need to just wrap the entire MaterialApp in a Futurebuilder

// Import libraries
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:firebase_core/firebase_core.dart';

// Import custom widgets
import 'views/landing_page.dart';
import 'views/info_page.dart';


// Initiate the app
Future<void> main() async {
  // Ensure all services are loaded before app is started
  WidgetsFlutterBinding.ensureInitialized();
  // Run the app
  runApp(MyApp());
}


// Define the MyApp widget
class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final Future<FirebaseApp> _initializedApp = Firebase.initializeApp();

  // Build the website
  @override
  Widget build(BuildContext context) {
    return return FutureBuilder(
      future: _initializedApp,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong. Please try reloading!');
        } else if (snapshot.hasData) {
          return MaterialApp.router(
            routeInformationParser: _router.routeInformationParser,
            routerDelegate: _router.routerDelegate,
            debugShowCheckedModeBanner: false,
          );
        } else {
          return const Center(
            child:  SizedBox(
              height: 150,
              width: 150,
              child: CircularProgressIndicator(),
            ),
          );
        }
      },
    );

  // Declare routing information
  final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const LandingPage(),
      ),
      GoRoute(
        path: '/info',
        builder: (context, state) => const InfoPage(),
      ),
    ],
  );
}

Related