面试题：Flutter中Provider状态管理的基本实现流程

1. 引入依赖

在 pubspec.yaml 文件中添加 provider 依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5 # 根据实际最新版本填写

然后运行 flutter pub get 下载依赖。

2. 创建状态类

创建一个用于管理计数器状态的类，该类继承自 ChangeNotifier，以便在状态变化时通知监听器。

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知监听器状态已更新
  }
}

3. 在顶层提供状态

在 main.dart 中，使用 MultiProvider（如果有多个状态需要管理，单个状态也可直接用 Provider）将状态提供给整个应用。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './CounterModel.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel()),
      ],
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Provider Counter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterPage(),
    );
  }
}

4. 使用状态

在页面中通过 Consumer 或 context.watch 来监听状态变化并构建UI。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './CounterModel.dart';

class CounterPage extends StatelessWidget {
  const CounterPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 使用 Consumer 监听状态变化
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter with Provider'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  'Count: ${counter.count}',
                  style: const TextStyle(fontSize: 24),
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                // 获取状态并调用更新方法
                context.read<CounterModel>().increment();
              },
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 状态更新原理

数据变化：当调用 CounterModel 中的 increment 方法时，_count 变量的值增加。
通知监听器：调用 notifyListeners() 方法，这会通知所有依赖该状态的 Consumer 或通过 context.watch 使用该状态的组件。
UI更新：接收到通知的组件会重新构建，从而在UI上反映出状态的变化，如计数器数值的增加。

星途面试题库