flutter 实现类似 v-model 功能

背景：在 vue 中，实现一个选择器组件，可以使用组件自定义 v-model 封装。在 flutter 中要实现类似的功能，可以使用 State Provider 进行封装。

// 伪代码
// 多选组件
class AppMultiSelect extends ConsumerStatefulWidget {
  final StateProvider<List<String>> selectedProvider;
  const AppMultiSelect({super.key, required this.selectedProvider});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _AppMultiSelectState();
}

class _AppMultiSelectState extends ConsumerState<AppMultiSelect> {
  // 数据源
  final List<ListItem> dataSource = [...];

  StateProvider<List<String>> get _selectedProvider => widget.selectedProvider;

  List<String> get _selectedList => ref.watch(_selectedProvider);

  _listItem(int index) {
    final data = dataSource[index];
    final isSelected = _selectedList.contains(data.id);
    return Row(
      children: [
        Text(data.label),
        const Spacer(),
        InkWell(
          onTap: () {
            if (!isSelected) {
              ref.read(_selectedProvider.notifier).state = [
                ..._selectedList,
                data.id,
              ];
            } else {
              ref.read(_selectedProvider.notifier).state =
                  _selectedList.where((id) => id != data.id).toList();
            }
          },
          child: const Text("选择"),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) => _listItem(index),
      ),
    );
  }
}
// 使用

//...
final selectedProvider = StateProvider<List<String>>((ref) => []);

List<String> get _selectedList => ref.watch(selectedProvider);

//...
AppMultiSelect(selectedProvider:selectedProvider)