Flutter中如何将带switch页面切换的UserModal整合到MultiProvider中？

步骤1：在全局MultiProvider中添加UserModal #

打开main.dart，在MultiProvider的providers列表里新增ChangeNotifierProvider来创建UserModal实例：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(
          value: Auth(),
        ),
        ChangeNotifierProxyProvider<Auth, Books>(
          create: (ctx) => Books('', []),
          update: (ctx, auth, previousBooks) => Books(
            auth.userId,
            previousBooks == null ? [] : previousBooks.books,
          ),
        ),
        // 新增UserModal的全局Provider
        ChangeNotifierProvider(create: (context) => UserModal()),
      ],
      // 补充MaterialApp包裹（原代码遗漏，确保应用正常运行）
      child: MaterialApp(
        title: 'Your App Title',
        home: const MultiPageProvider(),
      ),
    );
  }
}

步骤2：修改MultiPageProvider组件 #

移除组件内部的ChangeNotifierProvider，直接使用全局共享的UserModal，保留原有的页面切换逻辑：

class MultiPageProvider extends StatefulWidget {
  const MultiPageProvider({Key? key}) : super(key: key);

  @override
  _MultiPageProviderState createState() => _MultiPageProviderState();
}

class _MultiPageProviderState extends State<MultiPageProvider> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Using Provider"),
      ),
      body: Consumer<UserModal>(
        builder: (context, modal, child) {
          switch (modal.activeIndex) {
            case 0:
              return const BasicDetails();
            case 1:
              return const EducationDetails();
            default:
              return const BasicDetails();
          }
        },
      ),
    );
  }
}

补充说明 #

• 全局注册的UserModal会被整个应用共享，MultiPageProvider中的Consumer会自动从全局Provider获取实例，页面切换逻辑完全不受影响。
• 如果BasicDetails或EducationDetails需要修改activeIndex来切换页面，直接通过Provider.of<UserModal>(context, listen: false)或者Consumer获取实例操作即可。

内容的提问来源于stack exchange，提问作者best_of_man