在 main.dart 中将 Future 与 MaterialApp.router 结合使用

Question

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(),
      ),
    ],
  );
}

Answer 1

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(), ), ]; ); }

Answer 2

I had the same problem and above is how i handle it

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

Future<void> startingServices() async {
  await Future.delayed(const Duration(seconds: 40));
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routerConfig: router,
    );
  }
}

class BeforeHome extends StatelessWidget {
  const BeforeHome({super.key});
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: startingServices(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return const Home();
        } else {
          return const SplashSreen();
        }
      },
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});
  @override
  Widget build(BuildContext context) {
    return const Material(
      child: Text("Home"),
    );
  }
}

class SplashSreen extends StatelessWidget {
  const SplashSreen({super.key});

  @override
  Widget build(BuildContext context) {
    
    return Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Text(
            "Initialization...",
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.bold,
            ),
          ),
          
        ],
      ),
    );
  }
}

final router = GoRouter(
  routes: [
    GoRoute(
        path: '/',
        builder: (context, state) => const BeforeHome(),
        routes: [
          GoRoute(
            path: 'home',
            builder: (context, state) => const Home(),
          )
        ])
  ],
);