Last updated
Feb 25, 2025
4 mins read
Share on
Build 10x products in minutes by chatting with AI - beyond just a prototype.
Software Development Executive - II
Passionate Flutter developer crafting engaging mobile experiences. Turning coffee into beautiful UIs and bad jokes into commit messages. When not coding, he is probably debugging his life decisions.
Software Development Executive - II
A Flutter and iOS developer with 3+ years of experience. Looking forward to each new thing in tech. Wandering like Alice.
Flutter has become a go-to framework for many developers due to its ease of use and flexibility. One of the packages that make Flutter stand out is the flow_builder package. This package helps manage the navigation stack and maintain the flow state in a Flutter application.
Flow Builder is a Flutter package with a declarative API for managing the navigation stack and flow state. It simplifies implementing complex navigation flows by providing a simple yet powerful API.
The flow_builder package is not limited to just navigation. It also allows developers to manage the flow state of their applications. This is crucial in scenarios such as onboarding flows where the state of the flow needs to be maintained across various screens.
To use Flowbuilder, you need to add it as a dependency in your pubspec.yaml file.
The flow state is the one that controls the flow. Each time this state changes, a new navigation stack is created depending on the new flow state.
The FlowBuilder widget creates a navigation stack in response to changes in the flow state. OnGeneratePages will be called for each state change, and it must return the new navigation stack as a list of pages.
The state of the flow can be updated via .
The flow can be completed via .
A FlowBuilder can also be created with a custom FlowController in cases where the flow can be manipulated outside of the sub-tree.
A FlowController is created and used to control the flow in the above snippet. The FlowController is disposed of in the dispose method to free up resources when the widget is removed from the widget tree.
Flow Builder is a powerful and flexible package for Flutter. It simplifies the navigation and state management in Flutter applications. With Flow Builder, you can easily create complex navigation flows and maintain the state of these flows. Whether you are developing for Android, iOS, or any other platform that Flutter supports, Flow Builder is a package you should consider using in your Flutter applications. It not only simplifies the process of creating and managing navigation flows but also provides a clean and maintainable way to handle state changes in your application.
1
2
dependencies:
flow_builder: ^latest_version
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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,
);
}
}
1
2
3
4
5
6
7
8
9
FlowBuilder<Profile>(
state: const Profile(),
onGeneratePages: (profile, pages) {
return [
MaterialPage(child: NameForm()),
if (profile.name != null) MaterialPage(child: AgeForm()),
];
},
);
context.flow<T>().update1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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',
),
),
RaisedButton(
child: const Text('Continue'),
onPressed: _name.isNotEmpty ? _continuePressed : null,
)
],
),
),
);
}
}
context.flow<T>().complete1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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.parse(value)),
decoration: InputDecoration(
labelText: 'Age',
hintText: '42',
),
keyboardType: TextInputType.number,
),
RaisedButton(
child: const Text('Continue'),
onPressed: _age != null ? _continuePressed : null,
)
],
),
),
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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();
}
}