Flutter中如何根据条件动态选择ChangeNotifierProvider？

问题1：让ChangeNotifierProvider动态选择正确类型的方法 #

Dart的类型推断会将switch语句中返回的多个子类实例统一推断为它们的共同父类ChangeNotifier，这就是导致Provider泛型自动变为ChangeNotifier的核心原因。要解决这个问题，必须让每个分支的Provider泛型类型明确化，最直接且易维护的方式是为每个枚举值创建独立的子组件：

// 为每个数据类型创建专属屏幕组件，明确指定Provider泛型
class BlockListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<BlockProvider>(
      create: (_) => di.locator<BlockProvider>(),
      builder: (context, _) {
        return Scaffold(
          appBar: const AppBar(title: Text("List of Blocks")),
          body: Center(
            child: Text("Data from ${context.watch<BlockProvider>().data}"),
          ),
        );
      },
    );
  }
}

class EmployeeListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<EmployeeProvider>(
      create: (_) => di.locator<EmployeeProvider>(),
      builder: (context, _) {
        return Scaffold(
          appBar: const AppBar(title: Text("List of Employees")),
          body: Center(
            child: Text("Data from ${context.watch<EmployeeProvider>().data}"),
          ),
        );
      },
    );
  }
}

class VehicleListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<VehicleProvider>(
      create: (_) => di.locator<VehicleProvider>(),
      builder: (context, _) {
        return Scaffold(
          appBar: const AppBar(title: Text("List of Vehicles")),
          body: Center(
            child: Text("Data from ${context.watch<VehicleProvider>().data}"),
          ),
        );
      },
    );
  }
}

// 父组件根据枚举值切换对应子组件
class MasterListScreen extends StatelessWidget {
  final MasterDataType type;

  const MasterListScreen({super.key, required this.type});

  @override
  Widget build(BuildContext context) {
    switch (type) {
      case MasterDataType.block:
        return BlockListScreen();
      case MasterDataType.employee:
        return EmployeeListScreen();
      default:
        return VehicleListScreen();
    }
  }
}

通过这种方式，每个子组件的ChangeNotifierProvider都有明确的泛型类型，context.watch可以精准获取对应Provider实例，不会出现类型不匹配问题。

问题2：更优的动态选择Provider方案 #

除了拆分组件，还有两种更简洁的类型安全方案：

方案1：枚举映射+泛型组件复用 #

创建通用泛型组件封装UI逻辑，通过枚举映射集中管理Provider与配置的对应关系，避免重复代码：

// 通用泛型屏幕组件，复用UI框架逻辑
class GenericMasterListScreen<T extends ChangeNotifier> extends StatelessWidget {
  final String title;
  final T Function() providerCreator;
  final String Function(T) dataFormatter;

  const GenericMasterListScreen({
    super.key,
    required this.title,
    required this.providerCreator,
    required this.dataFormatter,
  });

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<T>(
      create: (_) => providerCreator(),
      builder: (context, _) {
        final provider = context.watch<T>();
        return Scaffold(
          appBar: AppBar(title: Text(title)),
          body: Center(
            child: Text(dataFormatter(provider)),
          ),
        );
      },
    );
  }
}

// 父组件通过映射关系动态生成对应页面
class MasterListScreen extends StatelessWidget {
  final MasterDataType type;

  const MasterListScreen({super.key, required this.type});

  @override
  Widget build(BuildContext context) {
    final configMap = {
      MasterDataType.block: (
        title: "List of Blocks",
        creator: () => di.locator<BlockProvider>(),
        formatter: (provider) => "Data from ${(provider as BlockProvider).data}",
      ),
      MasterDataType.employee: (
        title: "List of Employees",
        creator: () => di.locator<EmployeeProvider>(),
        formatter: (provider) => "Data from ${(provider as EmployeeProvider).data}",
      ),
      MasterDataType.vehicle: (
        title: "List of Vehicles",
        creator: () => di.locator<VehicleProvider>(),
        formatter: (provider) => "Data from ${(provider as VehicleProvider).data}",
      ),
    };

    final config = configMap[type]!;
    return GenericMasterListScreen(
      title: config.title,
      providerCreator: config.creator,
      dataFormatter: config.formatter,
    );
  }
}

方案2：统一父类/接口实现 #

如果三个Provider有共同业务逻辑，可以定义抽象父类或接口，让所有Provider实现该接口，从而直接使用父类泛型实现动态切换：

// 定义统一抽象父类，规范共同属性与方法
abstract class BaseMasterProvider extends ChangeNotifier {
  dynamic get data;
  String get screenTitle;
}

// 让各个Provider实现抽象父类
class BlockProvider extends BaseMasterProvider {
  @override
  String get screenTitle => "List of Blocks";
  
  @override
  String get data => "Block Data";
}

// EmployeeProvider、VehicleProvider同理实现BaseMasterProvider...

// 父组件直接使用父类泛型
class MasterListScreen extends StatelessWidget {
  final MasterDataType type;

  const MasterListScreen({super.key, required this.type});

  @override
  Widget build(BuildContext context) {
    BaseMasterProvider provider;
    switch (type) {
      case MasterDataType.block:
        provider = di.locator<BlockProvider>();
      case MasterDataType.employee:
        provider = di.locator<EmployeeProvider>();
      default:
        provider = di.locator<VehicleProvider>();
    }

    return ChangeNotifierProvider<BaseMasterProvider>(
      create: (_) => provider,
      builder: (context, _) {
        final currentProvider = context.watch<BaseMasterProvider>();
        return Scaffold(
          appBar: AppBar(title: Text(currentProvider.screenTitle)),
          body: Center(
            child: Text("Data from ${currentProvider.data}"),
          ),
        );
      },
    );
  }
}

这种方案适合Provider有共性逻辑的场景，无需拆分多个组件即可实现类型安全的动态切换。

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