Flutter Show Snackbar on root widget

Question

ok so here is my code on the root widget of application

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
  final _appRouter = AppRouter();
  return MultiBlocProvider(
   providers:[
    //initialize connectivity stream to check internet
    BlocProvider(
      create: (context) => getIt<NetworkBloc>(),
    ),...
   ],
   child:MultiBlocListener(
    listeners:[
     BlocListener<NetworkBloc, NetworkState>(
      listener: (context, state) {
        state.maybeMap(
            orElse: () {},
            loadSuccess: (state) {
              //stream returns false, ie ConnectivityResult.none
              if (!state.connection) {
                 ScaffoldMessenger.of(context)
                ..hideCurrentSnackBar()
                ..showSnackBar(
                  SnackBar(
                    content: Text(
                      "Please connect to WiFi or turn on mobile data",
                    ),
                  ),
                );
                //when Connectivity result = mobile or wifi
              } else {
                 ScaffoldMessenger.of(context)
                ..hideCurrentSnackBar()
                ..showSnackBar(
                  SnackBar(
                    content: Text(
                      "Connected!",
                    ),
                  ),
                );
              }
            },
        );
       }
     ),
    ],
    child: MaterialApp.router(
        title: F.title,
        routeInformationParser: _appRouter.defaultRouteParser(),
        routerDelegate: _appRouter.delegate(),
        theme: ThemeData(
          primaryColor: kYellowColor,
          primaryColorDark: kBlackColor,
          primarySwatch: kPrimarySwatch,
          visualDensity: VisualDensity.adaptivePlatformDensity,
          textTheme:
              GoogleFonts.openSansTextTheme(Theme.of(context).textTheme),
        ),
      ),
   )
  )
 }
}

I dont want to use third party libraries...I tried overlay support and it works but I dont want to use third party libraries; This code above crashes and its because of the snackbar..How do you achieve this ?

Answer 1

I tried this and it worked, using ScaffoldMessengerKey

final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
  new GlobalKey<ScaffoldMessengerState>();

and on MaterialApp widget

child: MaterialApp.router(
        scaffoldMessengerKey: _scaffoldKey,
        title: F.title,
        .....

so how to show the snackbar

 _scaffoldKey.currentState!
                  ..hideCurrentSnackBar()
                  ..showSnackBar(
                    SnackBar(content:Row()))

Answer 2

Declare the snackbar on top, before your function, then hideit and show it again when you need, try this code it should work.

  final snackBar = SnackBar(content: Text('Please connect to WiFi or turn on mobile data'));
  if (!state.connection) {
          ScaffoldMessenger.of(context).hideCurrentSnackBar();
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
                //when Connectivity result = mobile or wifi
              } else {
          ScaffoldMessenger.of(context).hideCurrentSnackBar();
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
              }
            },