Form.of() was called with a context that does not contain a Form widget

[AV-IO]

Expected results:
Form would be correctly found by Form.of(context)
This used to work on previous flutter versions (3.3.10 I believe)

Actual results:
received error: Form.of() was called with a context that does not contain a Form widget

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'project',
      theme: ThemeData(
        useMaterial3: true,
        visualDensity: VisualDensity.comfortable,
        brightness: Brightness.dark,
      ),
      routes: {
        '/': (BuildContext context) => const MyHomePage(),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  
  @override
  State<MyHomePage> createState() => MethodState();
}

class MethodState extends State<MyHomePage> {
  final bool _isOwned = true;
  bool _editMetaData = false;
  String _title = '';

  Widget titleMaybeSub({required String title, String? subtitle}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: Theme.of(context).textTheme.headlineLarge,
        ),
        if (subtitle != null)
          Text(
            subtitle,
            style: Theme.of(context).textTheme.titleSmall,
          ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return Scaffold(
          body: Row(
            children: <Widget>[
              Expanded(
                child: Scaffold(
                  body: ListView(
                    padding: const EdgeInsets.all(32),
                    children: <Widget>[
                      Card(
                        child: Padding(
                          padding: const EdgeInsets.all(16),
                          child: Form(
                            child: Column(
                              children: <Widget>[
                                // Card Title
                                Row(
                                  children: <Widget>[
                                    titleMaybeSub(
                                      title: 'About',
                                      subtitle: 'About',
                                    ),
                                    const Spacer(),
                                    Visibility(
                                      visible: _editMetaData,
                                      child: IconButton(
                                        onPressed: () {
                                          Form.of(context).reset();
                                          // Bug: Newest Flutter update broke this.
                                          setState(() {
                                            _editMetaData = !_editMetaData;
                                          });
                                        },
                                        icon: const Icon(Icons.close),
                                        tooltip: "Discard",
                                      ),
                                    ),
                                    Visibility(
                                      visible: _isOwned,
                                      child: IconButton(
                                        onPressed: () {
                                          if (_editMetaData) {
                                            // Bug: Newest Flutter update broke this.
                                            Form.of(context).save();
                                          }
                                          setState(() {
                                            _editMetaData = !_editMetaData;
                                          });
                                        },
                                        icon: _editMetaData ? const Icon(Icons.check) : const Icon(Icons.edit),
                                        tooltip: _editMetaData ? "Save" : "Edit",
                                      ),
                                    ),
                                  ],
                                ),
                                TextFormField(
                                  decoration: const InputDecoration(
                                    labelText: 'Title',
                                  ),
                                  initialValue: _title,
                                  onSaved: (newValue) {
                                    _title = newValue ?? '';
                                  },
                                  enabled: _editMetaData,
                                  textCapitalization: TextCapitalization.words,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}

Logs

run (I'll happily provide higher verbosity if needed):

> flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             20.5s
This app is linked to the debug service: ws://127.0.0.1:54286/3n7vITLK-dM=/ws
Debug service listening on ws://127.0.0.1:54286/3n7vITLK-dM=/ws

💪 Running with sound null safety 💪

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:54286/3n7vITLK-dM=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9102?uri=http://127.0.0.1:54286/3n7vITLK-dM=
══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
Form.of() was called with a context that does not contain a Form widget.
No Form widget ancestor could be found starting from the context that was passed to Form.of(). This
can happen because you are using a widget that looks for a Form ancestor, but no such ancestor
exists.
The context used was:
  LayoutBuilder(dependencies: [_InheritedTheme, _LocalizationsScope-[GlobalKey#7b18d]],
renderObject: _RenderLayoutBuilder#a4164)

When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49
throw_
packages/flutter/src/widgets/form.dart 98:9                                                                                    <fn>
packages/flutter/src/widgets/form.dart 107:14                                                                                  of
packages/project/main.dart 242:62                                                                                          <fn>
packages/flutter/src/material/ink_well.dart 1096:21
handleTap
packages/flutter/src/gestures/recognizer.dart 253:24
invokeCallback
packages/flutter/src/gestures/tap.dart 627:11
handleTapUp
packages/flutter/src/gestures/tap.dart 306:5
[_checkUp]
packages/flutter/src/gestures/tap.dart 276:7
acceptGesture
packages/flutter/src/gestures/arena.dart 163:12
sweep
packages/flutter/src/gestures/binding.dart 464:20
handleEvent
packages/flutter/src/gestures/binding.dart 440:14
dispatchEvent
packages/flutter/src/rendering/binding.dart 336:11
dispatchEvent
packages/flutter/src/gestures/binding.dart 395:7
[_handlePointerEventImmediately]
packages/flutter/src/gestures/binding.dart 357:5
handlePointerEvent
packages/flutter/src/gestures/binding.dart 314:7
[_flushPointerEventQueue]
packages/flutter/src/gestures/binding.dart 295:7
[_handlePointerDataPacket]
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/platform_dispatcher.dart 1183:13
invoke1
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/platform_dispatcher.dart 243:5
invokeOnPointerDataPacket
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/pointer_binding.dart 156:39
[_onPointerData]
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/pointer_binding.dart 689:20                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/pointer_binding.dart 620:14                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/pointer_binding.dart 303:16
loggedHandler
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/pointer_binding.dart 188:80                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37
_checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39
dcall

Handler: "onTap"
Recognizer:
  TapGestureRecognizer#de4b0
════════════════════════════════════════════════════════════════════════════════════════════════════

Application finished.

Analyze:

> flutter analyze
Analyzing project...
No issues found! (ran in 1.8s)

Doctor:

> flutter doctor -v
[✓] Flutter (Channel stable, 3.7.7, on Microsoft Windows [Version 10.0.22621.1265], locale en-US)
    • Flutter version 3.7.7 on channel stable at C:\Users\redacted\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2ad6cd72c0 (3 days ago), 2023-03-08 09:41:59 -0800
    • Engine revision 1837b5be5f
    • Dart version 2.19.4
    • DevTools version 2.20.1

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\redacted\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: D:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Build Tools 2022 17.1.0)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools
    • Visual Studio Build Tools 2022 version 17.1.32210.238
    • Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2020.3)
    • Android Studio at D:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.76.0)
    • VS Code at C:\Users\redacted\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.60.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.1265]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 110.0.5481.100
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 110.0.1587.69

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[dhruvinnv]

• There is no parent widget type of the Form here so, Form.of(context).save() will throw error as there no Parent widget type of Form.
• Just wrap the widget with Form like this:

Details

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'project',
      theme: ThemeData(
        useMaterial3: true,
        visualDensity: VisualDensity.comfortable,
        brightness: Brightness.dark,
      ),
      routes: {
        '/': (BuildContext context) => const MyHomePage(),
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => MethodState();
}

class MethodState extends State<MyHomePage> {
  final bool _isOwned = true;
  bool _editMetaData = false;
  String _title = '';

  Widget titleMaybeSub({required String title, String? subtitle}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          title,
          style: Theme.of(context).textTheme.headlineLarge,
        ),
        if (subtitle != null)
          Text(
            subtitle,
            style: Theme.of(context).textTheme.titleSmall,
          ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return Form(
          child: Builder(builder: (context) {
            return Scaffold(
              body: Row(
                children: <Widget>[
                  Expanded(
                    child: Scaffold(
                      body: ListView(
                        padding: const EdgeInsets.all(32),
                        children: <Widget>[
                          Card(
                            child: Padding(
                              padding: const EdgeInsets.all(16),
                              child: Form(
                                child: Column(
                                  children: <Widget>[
                                    // Card Title
                                    Row(
                                      children: <Widget>[
                                        titleMaybeSub(
                                          title: 'About',
                                          subtitle: 'About',
                                        ),
                                        const Spacer(),
                                        Visibility(
                                          visible: _editMetaData,
                                          child: IconButton(
                                            onPressed: () {
                                              Form.of(context).reset();
                                              // Bug: Newest Flutter update broke this.
                                              setState(() {
                                                _editMetaData = !_editMetaData;
                                              });
                                            },
                                            icon: const Icon(Icons.close),
                                            tooltip: "Discard",
                                          ),
                                        ),
                                        Visibility(
                                          visible: _isOwned,
                                          child: IconButton(
                                            onPressed: () {
                                              if (_editMetaData) {
                                                // Bug: Newest Flutter update broke this.
                                                Form.of(context).save();
                                              }
                                              setState(() {
                                                _editMetaData = !_editMetaData;
                                              });
                                            },
                                            icon: _editMetaData
                                                ? const Icon(Icons.check)
                                                : const Icon(Icons.edit),
                                            tooltip:
                                                _editMetaData ? "Save" : "Edit",
                                          ),
                                        ),
                                      ],
                                    ),
                                    TextFormField(
                                      decoration: const InputDecoration(
                                        labelText: 'Title',
                                      ),
                                      initialValue: _title,
                                      onSaved: (newValue) {
                                        _title = newValue ?? '';
                                      },
                                      enabled: _editMetaData,
                                      textCapitalization:
                                          TextCapitalization.words,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            );
          }),
        );
      },
    );
  }
}

[AV-IO]

@DK070202, I'm not sure I understand. What about the Form widget on line 70? Is that Form's child required to be a builder?
This also doesn't explain why the same code used to work ~v 3.3.10.

[dhruvinnv]

@DK070202, I'm not sure I understand. What about the Form widget on line 70? Is that Form's child required to be a builder? This also doesn't explain why the same code used to work ~v 3.3.10.

Hey, it's not necessary that form's child should be a builder. Basically when we call Form.of(context).save() we are searching for a parent widget that has state typeOf FormState. Under the hood, all widgets have related elements and they are maintained by the framework internally but if you want to access any parent elements and related widgets then it would require to have an element or context from where we can start searching as it will be under the same parent component widget so that's why in this case it was required else we can't search parent element which has type Form.

Alternatively what you can do is create a key type of FormState and provide it to the Form and can call save the method from state reference on the global key. If you don't want to wrap it with Builder.

 late GlobalKey<FormState> formKey;

  @override
  void initState() {
    super.initState();
    formKey = GlobalKey<FormState>();
  }

  void saveFormState(){
    formKey.currentState.save(); 
     setState(() {
      _editMetaData = !_editMetaData;
    });
  }

  Widget build(Buildcontext context) {
    return Form( 
      key: formKey, /// <--- Here
    );
  }

And I don't think it will behave differently In the old version or in the latest one. Framework will behave the same as in the current version.

[AV-IO]

Ok, so after downloading 3.3.10 I found this was due to the addition of maybeOf (#114120), and that while a couple fields were correctly saving/resetting due to some other circumstances, the example code I provided was caught with the ?. operator.

Self closing, and thank you @DK070202 for next steps and working code example!

[starchykov]

I encountered the same problem after updating Flutter to version 3.7. I managed to solve the problem by using Form.maybeOf(primaryFocus!.context!)?.save()
instead of
Form.of(context).save()

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.