Fields not displaying correct value after rebuild

[brunodmn]

trafficstars

Environment

Package version: 7.8.0

Flutter doctor

[✓] Flutter (Channel stable, 3.7.8, on macOS 13.1 22C65 darwin-arm64 (Rosetta),
    locale en-BR)
    • Flutter version 3.7.8 on channel stable at /Users/brunoandrade/Dev/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 90c64ed42b (9 days ago), 2023-03-21 11:27:08 -0500
    • Engine revision 9aa7816315
    • Dart version 2.19.5
    • DevTools version 2.20.1

Checking Android licenses is taking an unexpectedly long time...[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/brunoandrade/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.12.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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-7281165)

[✓] VS Code (version 1.76.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

Scanning for devices is taking a long time...[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        •
      android-arm64  • Android 12 (API 31) (emulator)
    • iPhone 13 Pro (mobile)      • 28F65B93-C4DA-4CCA-A04F-12EA22398500 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)             • macos                                •
      darwin-arm64   • macOS 13.1 22C65 darwin-arm64 (Rosetta)
    • Chrome (web)                • chrome                               •
      web-javascript • Google Chrome 111.0.5563.146

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

• No issues found!

Code sample

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

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

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

  @override
  State<MainApp> createState() => _MainAppState();
}

const kDefaultOption = 0;

class _MainAppState extends State<MainApp> {
  final formKey = GlobalKey<FormBuilderState>();
  int selectedOption = kDefaultOption;

  final initialValue = {
    'option': kDefaultOption,
    'value': 'myValue',
    'percent': 'myPercent'
  };
  void onChanged(int? value) {
    setState(() {
      selectedOption = value ?? 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    print(initialValue);
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: FormBuilder(
                key: formKey,
                initialValue: initialValue,
                child: Row(
                  children: [
                    Flexible(
                      child: FormBuilderDropdown(
                          name: 'option',
                          onChanged: onChanged,
                          items: const [
                            DropdownMenuItem(
                              value: 0,
                              child: Text('1'),
                            ),
                            DropdownMenuItem(
                              value: 1,
                              child: Text('2'),
                            )
                          ]),
                    ),
                    if (selectedOption == 0)
                      Flexible(
                        child: Container(
                          color: Colors.green,
                          child: FormBuilderTextField(
                            name: 'value',
                            decoration: const InputDecoration(labelText: '\$ value'),
                          ),
                        ),
                      ),
                    if (selectedOption == 1)
                      Flexible(
                        child: Container(
                          color: Colors.blue,
                          child: FormBuilderTextField(
                            name: 'percent',
                            decoration: const InputDecoration(labelText: '% percent'),
                          ),
                        ),
                      ),
                  ],
                ))),
      ),
    );
  }
}

Description

When the three is rebuild, form field is recreated with same value.

In the sample attached, I have 2 text fields filled as bellow:

   { 'value': 'myValue',
    'percent': 'myPercent'}

I have a DropDown to show value or percent field. When I change the selected option, the right field is created (we can see by the color and label text on the sample) but the value does not change.

Might be related to #1208

Expected behavior: Expected field created with right value. i.e.: when field named 'value' is created, it should display : 'myValue'; when field named 'percent' is created, it should display : 'myPercent';

Current behavior: The value from initial field is kept unchanged in the new field;

Steps to reproduce

1. Run the sample attached
2. Select another option on DropDown
3. Change kDefaultOption to 1, restart application to test with another field;

[deandreamatias]

I resolved when add a different key for each Field, like key: UniqueKey(). I couldn't find a solution to avoid this behavior internally, but I think that would be possible

[brunodmn]

Hi @deandreamatias,

Than you for your reply. I can confirm that adding a UniqueKey() works.

[nerder]

If I can add to this issue, this was working for me before when using a key such as this one:

key: const Key('mykey')

But with the latest version of flutter and the latest version of this plugin, it doesn't anymore.

I'm able to solve it using a UniqueKey tho.

[SherpaMiguel]

Any news about this issue? This continues to be a headache for us.

[SherpaMiguel]

I think this issue does not longer reproduce. Probably recent Flutter SDK update has fixed it.