Flutter开发工具插件ffx的使用

Flutter开发工具插件ffx的使用

简介

ffx 是一个全新的生命周期+状态管理工具，在 Flutter 中使用。它旨在解决 StatefulWidget 编写的模板问题，简化代码并提高工作效率。

原因

在编写 StatefulWidget 时，会有太多模板代码，同时也会出现状态更新异常以及使用 StreamBuilder 时的上下文切换问题。受 Compose 启发，我们尝试在开发过程中尽可能减少模板代码。

使用

要使用 ffx，你需要自定义你的 Widget 并继承 XWidget。然后在 build() 方法中，你会得到一个 x，它提供了你熟悉的所有功能，如 x.remember 和 x.find。

以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:ffx/ffx.dart';

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFx Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FirstPage(),
    );
  }
}

// 自定义的页面类
class FirstPage extends XWidget {
  const FirstPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 x.remember 来管理状态
    final counter = x.remember(mutableIntStateOf(0));

    return Scaffold(
      appBar: AppBar(
        backgroundColor: x.theme.colorScheme.inversePrimary,
        title: const Text('FFx Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示按钮点击次数
            Text(
              '你已经按下了按钮多少次：',
              style: x.theme.textTheme.headlineSmall,
            ),
            Text(
              '${counter.value}',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 更新状态
          counter.value = counter.value + 1;
        },
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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