Flutter学习笔记之Provider 5.0.0入门级使用

最新推荐文章于 2025-06-20 01:52:07 发布

原创最新推荐文章于 2025-06-20 01:52:07 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用Flutter的Provider进行状态管理。通过创建CounterModel并继承ChangeNotifier，实现计数器的功能。接着通过MultiProvider注册CounterModel，并在组件中使用context.watch和context.read来观察和触发状态改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Provider使用：
1.创建CounterModel（等同于get中GetController）

class CounterModel with ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

2.注册（相当于get中Get.put）

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ChangeNotifierProvider(create: (_) => CounterModel())],
        child: MaterialApp(
          home: MyHomePage(),
        ));
  }
}

3.使用


class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Provider'),
      ),
      body: Center(
        child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('${context.watch<CounterModel>().counter}')
              ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterModel>().increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}