[FlutterFormBuilder]: using context.findAncestorStateOfType in FormBuilder.of

[dadagov125]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.7.0

Platforms

• Android
• iOS
• Linux
• MacOS
• Web
• Windows

Flutter doctor

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.27.3, on macOS 15.2 24C101 darwin-arm64, locale ru-UZ)
    ✗ Downloaded executables cannot execute on host.
      See https://github.com/flutter/flutter/issues/6207 for more information.
      Flutter requires the Rosetta translation environment on ARM Macs. Try running:
        sudo softwareupdate --install-rosetta --agree-to-license

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/to/macos-android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.2.2)
[✓] Connected device (5 available)            
    ! Error: Browsing on the local area network for iPhone 13 Magomed . Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[!] Network resources                                           
    ✗ A cryptographic error occurred while checking "https://pub.dev/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed on your computer.
    ✗ An HTTP error occurred while checking "https://storage.googleapis.com/": Connection closed before full header was received
    ✗ A cryptographic error occurred while checking "https://maven.google.com/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed on your computer.
    ✗ A network error occurred while checking "https://cocoapods.org/": Connection reset by peer
    ✗ A cryptographic error occurred while checking "https://github.com/": Connection terminated during handshake
      You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware installed on your computer.

! Doctor found issues in 3 categories.

Minimal code example

Code sample

                    Builder(
                      builder: (context) {
                        final formState = FormBuilder.of(context);
                      },
                    );

Current Behavior

Currently, if you call FormBuilder.of in builder, it calls context.findAncestorStateOfType() which reduces the performance of the application because findAncestorStateOfType enumerates all parent nodes in the tree until it finds FormBuilderState.
In addition, with this approach, the current element is not updated when FormBuilderState changes.

Expected Behavior

FormBuilder.of must use context.dependOnInheritedWidgetOfExactType.

  static FormBuilderState? of(BuildContext context, [bool listen = false]) {
    if (listen) {
      return context
          .dependOnInheritedWidgetOfExactType<_FormBuilderScope>()
          ._formState;
    }
    return context.findAncestorStateOfType<FormBuilderState>();
  }

Steps To Reproduce

1. Create any widget.
2. Wrap it in FormBuilder
3. In the widget's build method, call FormBuilder.of(context)

Aditional information

No response

[itsUndefined]

@deandreamatias any chance this can get prioritized? Should be a very easy fix.

[deandreamatias]

@itsUndefined had a lot things to solve on https://github.com/flutter-form-builder-ecosystem and I don't have time enogth to solve all :(
But I'm totally open to review a PR if someone propose a solution for this

[deandreamatias]

Hi @itsUndefined !
I need a minimal code example to can execute:

• Without external packages and dependencies
• Without refereces of imports
• With only Flutter Material or Cupertino widgets and FormBuilder widgets
• Starting from main Dart method

Also, I need:

• A way to compare is a bad performance and what is a good performance.
• How can reproduce this:

the current element is not updated when FormBuilderState changes.

Example:

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        ...GlobalMaterialLocalizations.delegates,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: FormBuilderLocalizations.supportedLocales,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FormBuilder(
        key: _formKey,
        child: Column(
          children: [
            FormBuilderTextField(
              name: 'full_name',
              decoration: const InputDecoration(labelText: 'Full Name'),
              validator: FormBuilderValidators.compose([
                FormBuilderValidators.required(),
              ]),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                _formKey.currentState?.saveAndValidate();
                debugPrint(_formKey.currentState?.value.toString());
              },
              child: const Text('Print'),
            )
          ],
        ),
      ),
    );
  }
}

Thanks a lot

[deandreamatias]

Some references for implementation:

• https://api.flutter.dev/flutter/widgets/BuildContext/dependOnInheritedWidgetOfExactType.html
• https://api.flutter.dev/flutter/material/Theme/of.html
• https://github.com/flutter/flutter/blob/stable/packages/flutter/lib/src/widgets/form.dart#L104
• https://github.com/joanpablo/reactive_forms/blob/master/lib/src/widgets/reactive_form.dart#L50
• https://github.com/udos86/flutter-fast-forms/blob/main/lib/src/form.dart#L61

[itsUndefined]

Thank you for the references.

Here is a minimal example showing the original issue description, regarding the widget not updating on state update.

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FormBuilder Example',
      debugShowCheckedModeBanner: false,
      home: const _ExamplePage(),
    );
  }
}

class _ExamplePage extends StatefulWidget {
  const _ExamplePage();

  @override
  State<_ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<_ExamplePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: [
              FormBuilderTextField(
                name: 'full_name',
                decoration: const InputDecoration(labelText: 'Full Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your full name';
                  }
                  return null;
                },
              ),
              const _NestedWidget(),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  _formKey.currentState?.saveAndValidate();
                  debugPrint(_formKey.currentState?.value.toString());
                },
                child: const Text('Print'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _NestedWidget extends StatelessWidget {
  const _NestedWidget();

  @override
  Widget build(BuildContext context) {
    final form = FormBuilder.of(context)!;

    return Text(form.isValid ? 'Form is valid' : 'Form is invalid');
  }
}

Notice that no matter what, _NestedWidget never rebuilds and "Form is invalid" is always displayed.

I recommend adding a listen option on the Of method with listen=false as the default to keep existing behavior as is. In a future major release we can make this default to true as this appears to be the default pattern. This will be a breaking change.

[deandreamatias]

I'm trying to figure this out, but it's a bit wild. I'm going to take a deeper look to see if I get any solutions.

[deandreamatias]

Related with #1129

[itsUndefined]

Thanks for investigating this. I might find some time to troubleshoot and come up with a solution.