Flutter动态布局构建插件flow_builder的使用

Flutter开发中，flow_builder 插件提供了一种优雅的方式来创建和管理复杂的导航流程。它允许开发者根据应用的状态动态生成导航栈，从而简化了多步骤表单、向导式界面等场景下的页面流转逻辑。

一、简介

flow_builder 是一个用于构建基于状态变化的动态导航流的Flutter库。通过定义一个流动状态（Flow State），每当这个状态发生变化时，都会根据新的状态重新生成整个导航栈。这意味着你可以轻松地实现多步骤表单、向导式的用户引导等功能，而无需手动管理每个页面之间的转换。

• GitHub Actions Build Status
• Coverage
• Pub Package Version

二、使用方法

1. 定义流动状态 (Define a Flow State)

首先需要定义一个类来表示流动状态。例如，我们有一个 Profile 类，包含用户的姓名、年龄和体重信息：

class Profile {
  const Profile({this.name, this.age, this.weight});

  final String? name;
  final int? age;
  final int? weight;

  Profile copyWith({String? name, int? age, int? weight}) {
    return Profile(
      name: name ?? this.name,
      age: age ?? this.age,
      weight: weight ?? this.weight,
    );
  }
}

2. 创建 FlowBuilder (Create a FlowBuilder)

接下来，在你的应用中使用 FlowBuilder 来监听流动状态的变化，并根据当前状态生成相应的页面列表：

FlowBuilder<Profile>(
  state: const Profile(),
  onGeneratePages: (profile, pages) {
    return [
      MaterialPage(child: NameForm()),
      if (profile.name != null) MaterialPage(child: AgeForm()),
    ];
  },
);

这里的关键是 onGeneratePages 回调函数，它会在每次流动状态改变时被调用，返回一个新的页面列表。

3. 更新流动状态 (Update the Flow State)

在具体的页面组件内部，可以通过 context.flow<T>().update 方法来更新流动状态：

class NameForm extends StatefulWidget {
  @override
  _NameFormState createState() => _NameFormState();
}

class _NameFormState extends State<NameForm> {
  var _name = '';

  void _continuePressed() {
    context.flow<Profile>().update((profile) => profile.copyWith(name: _name));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Name')),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value) => setState(() => _name = value),
              decoration: InputDecoration(
                labelText: 'Name',
                hintText: 'John Doe',
              ),
            ),
            ElevatedButton(
              child: const Text('Continue'),
              onPressed: _name.isNotEmpty ? _continuePressed : null,
            )
          ],
        ),
      ),
    );
  }
}

在这个例子中，当用户输入完名字并点击“继续”按钮后，会触发 _continuePressed() 方法，进而更新流动状态中的 name 字段。

4. 完成流动 (Complete the Flow)

如果需要结束整个流动过程，可以使用 context.flow<T>().complete 方法：

class AgeForm extends StatefulWidget {
  @override
  _AgeFormState createState() => _AgeFormState();
}

class _AgeFormState extends State<AgeForm> {
  int? _age;

  void _continuePressed() {
    context
        .flow<Profile>()
        .complete((profile) => profile.copyWith(age: _age));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Age')),
      body: Center(
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value) => setState(() => _age = int.tryParse(value)),
              decoration: InputDecoration(
                labelText: 'Age',
                hintText: '42',
              ),
              keyboardType: TextInputType.number,
            ),
            ElevatedButton(
              child: const Text('Continue'),
              onPressed: _age != null ? _continuePressed : null,
            )
          ],
        ),
      ),
    );
  }
}

这里的 complete 方法不仅更新了流动状态，还标志着整个流动已经完成。

5. 使用自定义 FlowController (FlowController)

有时候你可能希望从子树外部控制流动，这时就可以使用 FlowController：

class MyFlow extends StatefulWidget {
  @override
  State<MyFlow> createState() => _MyFlowState();
}

class _MyFlowState extends State<MyFlow> {
  late FlowController<Profile> _controller;

  @override
  void initState() {
    super.initState();
    _controller = FlowController(const Profile());
  }

  @override
  Widget build(BuildContext context) {
    return FlowBuilder(
      controller: _controller,
      onGeneratePages: ...,
    );
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }
}

通过这种方式，即使是在远离流动入口的地方，也可以方便地操作流动状态。

三、完整示例代码

为了更直观地理解如何使用 flow_builder，以下是一个完整的示例应用程序：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (_) => FlowExample()));
          },
          child: Text('Start Flow Example'),
        ),
      ),
    );
  }
}

class FlowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlowBuilder<Profile>(
      state: const Profile(),
      onGeneratePages: (profile, list) {
        return [
          MaterialPage(child: NameForm()),
          if (profile.name != null) MaterialPage(child: AgeForm()),
        ];
      },
    );
  }
}

class NameForm extends StatefulWidget {
  @override
  _NameFormState createState() => _NameFormState();
}

class _NameFormState extends State<NameForm> {
  var _name = '';

  void _continuePressed() {
    context.flow<Profile>().update((profile) => profile.copyWith(name: _name));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Name')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) => setState(() => _name = value),
              decoration: InputDecoration(
                labelText: 'Name',
                hintText: 'John Doe',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _name.isNotEmpty ? _continuePressed : null,
              child: Text('Continue'),
            ),
          ],
        ),
      ),
    );
  }
}

class AgeForm extends StatefulWidget {
  @override
  _AgeFormState createState() => _AgeFormState();
}

class _AgeFormState extends State<AgeForm> {
  int? _age;

  void _continuePressed() {
    context.flow<Profile>().complete((profile) => profile.copyWith(age: _age));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Age')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) => setState(() => _age = int.tryParse(value)),
              decoration: InputDecoration(
                labelText: 'Age',
                hintText: '42',
              ),
              keyboardType: TextInputType.number,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _age != null ? _continuePressed : null,
              child: Text('Finish'),
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何使用 flow_builder 创建一个多步骤表单，包括名称和年龄两个字段的输入。当所有必填项都填写完毕后，整个流动将被标记为完成，并且可以返回到主屏幕。