Nesting multiple package builders in MaterialApp

220

The following code should work

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
        OneContext().builder(
            context,
            FlutterEasyLoading(
              child: Scaffold(), //Add your main Widget here
            )),
        maxWidth: 1200,
        minWidth: 480,
        defaultScale: true,
        breakpoints: [
          ResponsiveBreakpoint.resize(480, name: MOBILE),
          ResponsiveBreakpoint.autoScale(800, name: TABLET),
          ResponsiveBreakpoint.resize(1000, name: DESKTOP),
        ],
        background: Container(color: Color(0xFFF5F5F5)),
      ),
    );
  }
}

The rule I followed here is, whenever a builder is looking for a child, I add the next builder.
The only trick here was with EasyLoading : instead of using the init() method, I used the Widget FlutterEasyLoading

Be careful when nesting builders, you may have to respect a specific order in order for your code to work properly.

Share:
220
Swisscheese
Author by

Swisscheese

Updated on December 30, 2022

Comments

  • Swisscheese
    Swisscheese over 1 year

    I have an app that and I'm attempting to use 3 packages: responsive_framework, flutter_easyloading, and one_context. Problem is, I can't figure out how to nest them correctly since they all must be called from the MaterialApps builder. I know they have to be nested like so: Responsive_framework<flutter_easyloading<one_context>>>, but I'm having trouble finding the right combination utilizing their initialization methods.

    Current initialization:

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider<UserInventoryProvider>(
                create: (_) => UserInventoryProvider()),
            ChangeNotifierProvider<UserFaultsProvider>(
                create: (_) => UserFaultsProvider()),
            ChangeNotifierProvider<AuthProvider>(create: ((_) => AuthProvider())),
            ChangeNotifierProvider<NavDrawerProvider>(
                create: ((_) => NavDrawerProvider())),
            ChangeNotifierProvider<LoginDialogProvider>(
                create: ((_) => LoginDialogProvider())),
            //ChangeNotifierProvider<CacheProvider>(create: ((_) => CacheProvider()))
          ],
          child: MaterialApp(
            // Nest the builders in the tree
            builder: EasyLoading.init(builder: OneContext().builder), <--- I have it working with 2 here
            title: 'AppName',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              visualDensity: VisualDensity.adaptivePlatformDensity,
              fontFamily: 'Roboto',
            ),
            navigatorKey: locator<DynamicNavigationService>().navigationKey,
            initialRoute: Routes.home,
            onGenerateRoute: AppName.Router.generateRoute,
          ),
        );
      }
    }
    

    responsive_frameworks initialization follows this:

      builder: (context, widget) => ResponsiveWrapper.builder(
          BouncingScrollWrapper.builder(context, widget!),
          maxWidth: 1200,
          minWidth: 450,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(450, name: MOBILE),
            ResponsiveBreakpoint.autoScale(800, name: TABLET),
            ResponsiveBreakpoint.autoScale(1000, name: TABLET),
            ResponsiveBreakpoint.resize(1200, name: DESKTOP),
            ResponsiveBreakpoint.autoScale(2460, name: "4K"),
          ],
          background: Container(color: Color(0xFFF5F5F5))),
    

    I've been trying to find a way to return the combination of the other two in there like: which I found as an example for an unrelated package

      builder: (context, child) {
        child = EasyLoading.init(builder: OneContext().builder);
        child = ResponsiveWrapper.builder(
      BouncingScrollWrapper.builder(context, widget!),
      maxWidth: 1200,
      minWidth: 450,
      defaultScale: true,
      breakpoints: [
        ResponsiveBreakpoint.resize(450, name: MOBILE),
        ResponsiveBreakpoint.autoScale(800, name: TABLET),
        ResponsiveBreakpoint.autoScale(1000, name: TABLET),
        ResponsiveBreakpoint.resize(1200, name: DESKTOP),
        ResponsiveBreakpoint.autoScale(2460, name: "4K"),
      ],
      background: Container(color: Color(0xFFF5F5F5))), 
        return child;
      }, 
    

    But I have yet to find a combination of calls that works. I feel like there's a simple way to do this but I can't find any information on nesting multiple builders