Riverpod Consumer 小部件 - 如何从下拉小部件中观看

Question

尝试使用riverpod，没有找到答案 - 在线示例使用相同的 dart 文件。

我想传递在位于不同文件的下拉列表中选择的公司名称。 这里的代码应该是什么：

DropdownButton<String>(
          items: CompanyList.map((value) {
            return DropdownMenuItem<String>(
              child: Text(
                value,
                style: TextStyle(color: lightGrey),
              ),
              value: value,
            );
          }).toList(),
          value: company,
          onChanged: (value) {
            setState(() {
              company= value; // service 
            });
            ** final compamyProvider = Provider((_) => value); **
          },
        ),

所以我可以在这里获取值：

class SiteLayout extends ConsumerWidget {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String companyName = ref.watch(compamyProvider);
    return Scaffold(
...

Answer 1

创建一个StateProvider

final dropItemProvider = StateProvider<String>((ref) => "");

完整代码：

class MainWidgetR extends StatefulWidget {
  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidgetR> {
  String value = "Company 0";

  final items = List.generate(
    4,
    (index) => DropdownMenuItem(
      child: Text("Company $index"),
      value: "Company $index",
    ),
  );

  @override
  void initState() {
    super.initState();

    ///setting default value  on provider
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      context.read(dropItemProvider).state = items[0].value!;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton(
              items: items,
              value: value,
              onChanged: (value) {
                context.read(dropItemProvider).state = value as String;
                setState(() {
                  value = value;
                });
              },
            ),
            RiverPodRespone(),
          ],
        ),
      ),
    );
  }
}

class RiverPodRespone extends ConsumerWidget {
  const RiverPodRespone({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, watch) {
    final dataNotifier = watch(dropItemProvider);
    return Container(
      child: Text("${dataNotifier.state}"),
    );
  }
}

有帮助吗？