Flutter上下文管理插件flutter_context的使用

Flutter Context

React-like Context API for Flutter

[WIP]

License

MIT

使用示例

以下是一个完整的示例，展示如何使用 flutter_context 插件来实现上下文管理。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_context/flutter_context.dart'; // 引入 flutter_context 插件

void main() {
  runApp(const MyApp()); // 应用入口
}

// 定义两个上下文变量，分别用于存储计数器值和增量模式
final counterContext = createContext<int>()(0); // 默认值为 0
final deltaContext = createContext<bool>()(false); // 默认值为 false

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

  [@override](/user/override)
  Widget build(context) {
    const title = 'Flutter Context Demo'; // 设置应用标题

    // 使用 MultiContextProvider 包裹子树，将上下文注入到子组件中
    return MultiContextProvider(
      contexts: [
        counterContext, // 注入计数器上下文
        deltaContext,   // 注入增量模式上下文
      ],
      child: MaterialApp(
        title: title,
        theme: ThemeData(useMaterial3: true), // 使用 Material 3 主题
        home: const Home(title: title), // 设置首页
      ),
    );
  }
}

class Home extends StatelessWidget {
  final String title;
  const Home({super.key, required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)), // 设置应用栏标题
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: const [
            Text('You have pushed the button this many times:'), // 提示文本
            SizedBox(height: 16), // 垂直间距
            CounterText(), // 显示计数器值
            SizedBox(height: 16), // 垂直间距
            DeltaModifierCheckbox() // 增量模式切换按钮
          ],
        ),
      ),
      floatingActionButton: const IncrementButton(), // 浮动按钮
    );
  }
}

// 增量按钮组件
class IncrementButton extends StatelessWidget {
  const IncrementButton({super.key});

  // 获取更新计数器值的方法
  VoidCallback increment(BuildContext context) {
    final update = context.updateValue(counterContext)!;

    return () {
      final delta = context.read(deltaContext); // 获取当前增量模式

      update((currentValue) {
        return currentValue + (delta ? 10 : 1); // 根据增量模式更新值
      });
    };
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: increment(context), // 点击事件绑定
      tooltip: 'Increment', // 工具提示
      child: const Icon(Icons.add), // 图标
    );
  }
}

// 计数器文本组件
class CounterText extends StatelessWidget {
  const CounterText({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final value = context.watch(counterContext); // 监听计数器上下文变化
    final titleStyle = Theme.of(context).textTheme.headlineMedium; // 设置文本样式

    return Text(value.toString(), style: titleStyle); // 显示计数器值
  }
}

// 增量模式切换按钮组件
class DeltaModifierCheckbox extends StatelessWidget {
  const DeltaModifierCheckbox({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final setValue = context.setValue(deltaContext); // 设置增量模式的方法
    final value = context.watch(deltaContext); // 监听增量模式变化

    return TextButton.icon(
      icon: Icon(value ? Icons.check_box : Icons.check_box_outline_blank), // 图标
      onPressed: () => setValue(!value), // 切换增量模式
      label: const Text('Increment by 10'), // 按钮文字
    );
  }
}