美文网首页
flutter_riverpod基础使用

flutter_riverpod基础使用

作者: 4陈雨泽4 | 来源:发表于2022-05-11 14:05 被阅读0次

    第一种:

    1.全局增加ProviderScope

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

    2.增加一个全局的store.dart文件,用于注册各个业务使用的store。以下是store.dart文件中的内容。

    final userStore = ChangeNotifierProvider<UserStore>(
      (ref) => UserStore(),
    );
    
    final orderStore = ChangeNotifierProvider<OrderStore>(
      (ref) => OrderStore(),
    );
    ...
    

    3.实现实际的业务需要。

    class UserStore extends ChangeNotifier {
     String name = "";
     getUserInfo() {
       Http.get(UrlUtil.userCenter, {}, (data) {
         UserCenterModel user = UserCenterModel().init(data);
         name = user.fullName; // 服务端data转app端的数据model。
         notifyListeners(); // 通知绑定了UserStore的每一个页面,刷新。
       });
     }
    }
    

    4.在具体的页面,使用store。让页面继承ConsumerWidget

    import 'package:flutter_riverpod/flutter_riverpod.dart';
    import 'package:logistics/providers/stores.dart';
    class AccountTest extends ConsumerWidget {
      @override
      Widget build(BuildContext context, WidgetRef ref) {
        final notifier = ref.watch(userStore);
        return Scaffold(
          appBar: CustomAppBar(title: "测试"),
          body: Container(
            child: Center(
              child: Text("计数器: ${notifier.name}"),
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              ref.read(userStore).getUserInfo();
            },
            child: const Icon(Icons.add),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter_riverpod基础使用

          本文链接:https://www.haomeiwen.com/subject/ilvdurtx.html