在 MaterialApp 中嵌套多个包构建器答案

【问题标题】：Nesting multiple package builders in MaterialApp在 MaterialApp 中嵌套多个包构建器
【发布时间】：2021-08-23 00:15:58
【问题描述】：

我有一个应用程序，我正在尝试使用 3 个包：responsive_framework、flutter_easyloading 和 one_context。问题是，我无法弄清楚如何正确嵌套它们，因为它们都必须从 MaterialApps 构建器中调用。我知道它们必须像这样嵌套：Responsive_framework>>，但我无法利用它们的初始化方法找到正确的组合。

当前初始化：

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 初始化如下：

  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))),

我一直在尝试找到一种方法来返回其中的其他两个组合，例如：我发现这是一个不相关包的示例

  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;
  },

但我还没有找到有效的调用组合。我觉得有一种简单的方法可以做到这一点，但我找不到任何关于嵌套多个构建器的信息

【问题讨论】：

标签： flutter dart flutter-provider

【解决方案1】：

下面的代码应该可以工作

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

我在这里遵循的规则是，每当建造者在寻找孩子时，我都会添加下一个建造者。
这里唯一的技巧是使用 EasyLoading ：我没有使用 init() 方法，而是使用了 Widget FlutterEasyLoading

嵌套构建器时要小心，您可能必须遵守特定顺序才能使代码正常工作。

【讨论】：