CODEWITHSUNDEEP
flutterdartflutter-provider
Swisscheese
Swisscheese

Reputation: 681

Nesting multiple package builders in MaterialApp

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

Upvotes: 1

Views: 934

Answers (1)

FDuhen
FDuhen

Reputation: 4826

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.

Upvotes: 1

Related Questions