flutter_riverpod基础使用

第一种:

1.全局增加ProviderScope

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

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

final userStore = ChangeNotifierProvider(
  (ref) => UserStore(),
);

final orderStore = ChangeNotifierProvider(
  (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基础使用)