如何在 riverpod 状态管理中使用读取方法

Question

我使用 riverpod 状态管理

pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1
  get: ^4.6.1
  flutter_bloc: ^8.0.1
  riverpod: ^1.0.3
  hooks_riverpod: ^1.0.3

我的提供商文件

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class CounterRiv extends StateNotifier<int> {
  CounterRiv() : super(0);

  void increment() => state++;
}

这是主要的

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:statemng/riverpod/controler_riv.dart';
import 'package:statemng/riverpod/home_riv.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      
      home: ProviderScope(
        child: MyHomeRiv(),
      ),
    );
  }
}

归档首页

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:statemng/riverpod/controler_riv.dart';

import 'dashboard_riv.dart';

class MyHomeRiv extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

final counterprovider =
    StateNotifierProvider<CounterRiv, int>((ref) => CounterRiv());

class _MyHomePageState extends State<MyHomeRiv> {
  @override
  int n = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("state management"),
      ),
      body: Center(
          child: Column(
        children: [
          Dashboard(),
        ],
      )),
      floatingActionButton:  FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              print("n= ${n++}");

              setState(() {
                context.read(counterprovider.notifier).increment();
              });
            }),
      
    );
  }
}

在 setState 中，我在读取方法中有 error：方法 'read' 没有为类型 'BuildContext' 定义。尝试将名称更正为现有方法的名称，或者定义一个名为 'read'

的方法

在计数器文件中

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

import 'package:statemng/riverpod/home_riv.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
class Conter2 extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final count = useProvider(counterprovider);
    return Card(
      elevation: 6,
      child: Container(
        height: 150,
        width: 150,
        child: Center(
          child: Text(count .toString(), style: const TextStyle(fontSize: 60)),
        ),
      ),
    );
  }
}

我在 useProvider 中有 Error :

方法 'useProvider' 没有为类型 'Conter2' 定义。尝试将名称更正为现有方法的名称，或定义一个名为 'useProvider'

的方法

有谁知道这个 2Error 的解决方案是什么？

Answer 1

你应该添加 'flutter_riverpod' 包，因为你正在使用 flutter。如果要使用挂钩，请添加 'hooks_riverpod'.

检查此 table：https://riverpod.dev/docs/getting_started#installing-the-package

在你的 main.dart 中，用 ProviderScope 包装你的 MaterialApp。

void main() {
  runApp(ProviderScope(child: MyApp()));
}

读取StateProvider的方式有很多种，这里提一下：

使用 ConsumerWidget（针对 StatelessWidget）

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: Text("state management"),
      ),
      body: Center(
          child: Column(
          children: [
           Dashboard(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
             ref.read(counterprovider.notifier).increment();
          },
       ),
    );
  }
}

使用 HookConsumerWidget

class Conter2 extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterprovider);
    return Card(
      elevation: 6,
      child: Container(
        height: 150,
        width: 150,
        child: Center(
          child: Text(count.toString()),
        ),
      ),
    );
  }
}

我强烈建议您阅读文档并查看所有提供的示例：https://riverpod.dev/docs/concepts/reading

如何在 riverpod 状态管理中使用读取方法

How to use read method with riverpod state management

flutter

dart

riverpod