Nesting multiple package builders in MaterialApp
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.
Swisscheese
Updated on December 30, 2022Comments
-
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