在 MaterialApp 中嵌套多个包构建器

Question

我有一个应用程序，我正在尝试使用 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))),

我一直在尝试找到一种方法来 return 将其中的其他两个组合起来，例如：我找到了一个不相关包的示例

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

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

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

我在这里遵循的规则是，每当一个构建器正在寻找 child，我添加下一个构建器。
这里唯一的技巧是使用 EasyLoading：我没有使用 init() 方法，而是使用了 Widget FlutterEasyLoading

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

在 MaterialApp 中嵌套多个包构建器

Nesting multiple package builders in MaterialApp

dart

flutter

flutter-provider