I stylized the example app. You can see the changes in realtime in a table.

@erayerdin take a look in this article. Help me a lot when I've implemented this tests

Tests are done. Added a section to readme. There are still things to do, though. Currently, StreamBuilder strangely needs setState to refresh its content in the example app. I'll try to write a StatelessWidget and investigate it.

I will also try how Submit and Reset buttons behave in the example app.

So, I've changed example/main.dart on my local machine. This is what I've done, and it's the ideal usecase in my mind.

The Minimum Ideal Usecase

class CompleteForm extends StatelessWidget {
 final _formKey = GlobalKey<FormBuilderState>();
 CompleteForm({super.key});
 @override
 Widget build(BuildContext context) {
 return FormBuilder(
 key: _formKey,
 child: Scaffold(
 body: Padding(
 padding: const EdgeInsets.all(8),
 child: Center(
 child: Column(
 mainAxisSize: MainAxisSize.min,
 children: [
 FormBuilderTextField(name: 'text1'),
 StreamBuilder(
 stream: _formKey.currentState!.onChanged,
 builder:
 (context, AsyncSnapshot<FormBuilderFields> snapshot) {
 return Text(
 snapshot.data?.values.first.value.toString() ?? 'null');
 },
 ),
 ],
 ),
 ),
 ),
 ),
 );
 }
}

Why do I consider this as ideal?

• It's a stateless widget. Flutter won't unnecessarily hold states for rerendering like stateful widget.
• Stateless widgets are much more readable and comprehensible than stateless ones.

This doesn't work though. The reason is currentState in _formKey.currentState!.onChanged is null when the app is first loaded. Thus the whole app crashes saying null-check operator used in a null value.

This can be avoided by hot reloading or hot refreshing the app, but a real world user won't be able to do that.

What Works

class CompleteForm extends StatefulWidget {
 const CompleteForm({super.key});
 @override
 State<CompleteForm> createState() => _CompleteFormState();
}
class _CompleteFormState extends State<CompleteForm> {
 final _formKey = GlobalKey<FormBuilderState>();
 @override
 Widget build(BuildContext context) {
 return FormBuilder(
 key: _formKey,
 onChanged: () {
 setState(() {});
 },
 child: Scaffold(
 body: Padding(
 padding: const EdgeInsets.all(8),
 child: Center(
 child: Column(
 mainAxisSize: MainAxisSize.min,
 children: [
 FormBuilderTextField(name: 'text1'),
 StreamBuilder(
 stream: _formKey.currentState?.onChanged,
 builder:
 (context, AsyncSnapshot<FormBuilderFields> snapshot) {
 return Text(
 snapshot.data?.values.first.value.toString() ?? 'null');
 },
 ),
 ],
 ),
 ),
 ),
 ),
 );
 }
}

This one works because we do setState on form's each onChanged.

Why do I not find this ideal usecase?

• Again, readability.
• onChanged on form constantly does setState on each keypress, which is frequent enough that it is not desirable. It might cause some performance and consistency issues in some edge cases (like performance overhead or keyboard buttons not responding in some cases as the user is fast-typing).

So, from this point on, I need to figure out a way to make sure that currentState is not null and keep the devs on StatelessWidget. I'm not quite sure as to how, but I will figure it out somehow I guess.

These days, I'm busy with work, so I need to have a hold on this. Will come back to it tho.

It's been almost a month. I've asked this question on SO. Let's see if someone can figure it out.

This comment from 1157 does not do anything good in our case.

Hi! I think onChanged is not a good name for creating a stream subscription. Developers are used to seeing onChanged as ValueChanged from the foundation library.
I think it could be simplified by simply calling it .stream or onChangedStream as an option.