FormBuilderDropdown when selected keeps triggering a rebuild

[Aarkann]

Is there an existing issue for this?

• I have searched the existing issues

Package/Plugin version

9.2.1

Platforms

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

Flutter doctor

Flutter doctor

[√] Flutter (Channel stable, 3.19.1, on Microsoft Windows [Version 10.0.22631.3155], locale en-US)
    • Flutter version 3.19.1 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision abb292a07e (10 days ago), 2024-02-20 14:35:05 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

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

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\home\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio1\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)
    • All Android licenses accepted.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.4.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools
    • Visual Studio Build Tools 2022 version 17.4.33122.133
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2023.1)
    • Android Studio at C:\Program Files\Android\Android Studio1
    • 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 17.0.7+0-b2043.56-10550314)

[√] VS Code (version 1.87.0)
    • VS Code at C:\Users\home\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.82.0

[√] Connected device (3 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.22631.3155]
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 122.0.2365.59

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

Minimal code example

Code sample

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:provider/provider.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:google_fonts/google_fonts.dart';
import '../../providers/auth.dart';
import '../../providers/farm.dart';
import '../../models/cropfield.dart';

class AddCropfieldScreen extends StatefulWidget {
  AddCropfieldScreen({Key? key}) : super(key: key);
  static const routeName = '/cropfield/add';

  @override
  _AddCropfieldScreenState createState() => _AddCropfieldScreenState();
}

class _AddCropfieldScreenState extends State<AddCropfieldScreen> {
  final _cropfieldKey = GlobalKey<FormBuilderState>();
  final cropfield = Cropfield();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final farm = Provider.of<Farm>(context);
    cropfield.farmId = farm.id;
    cropfield.locale = farm.locale;
  }

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<Auth>(context, listen: false);
    final coordinates = ModalRoute.of(context)!.settings.arguments as Map?;
    final cropfieldAdded =
        SnackBar(content: Text(AppLocalizations.of(context)!.cropfieldCreated));
    final cropfieldError =
        SnackBar(content: Text(AppLocalizations.of(context)!.taskError));
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Color(0xFF00412C)),
        title: Text(
          AppLocalizations.of(context)!.addCropfield,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 16,
            color: Color(0xFF00412C),
          ),
        ),
        elevation: 0,
        backgroundColor: Color.fromARGB(255, 253, 250, 250),
        toolbarHeight: 45,
      ),
      bottomNavigationBar: MaterialButton(
        height: 50,
        color: Color(0xFF4CAF50),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.done,
              color: Colors.white,
            ),
            SizedBox(
              width: 10,
            ),
            Text(
              AppLocalizations.of(context)!.save,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
          ],
        ),
        onPressed: () {
          _cropfieldKey.currentState!.save();
          if (_cropfieldKey.currentState!.validate()) {
            cropfield.add(user.token, _cropfieldKey.currentState!.value);
          } else {
            ScaffoldMessenger.of(context).showSnackBar(cropfieldError);
          }
        },
      ),
      body: FutureBuilder(
        future: Future.wait([
          cropfield.getCampaigns(user.token),
          cropfield.getUnits(user.token),
        ]),
        builder: (ctx, AsyncSnapshot snapshot) => snapshot.connectionState ==
                ConnectionState.waiting
            ? Center(
                child: LoadingAnimationWidget.discreteCircle(
                    color: Colors.blue,
                    secondRingColor: Colors.green,
                    thirdRingColor: Color(0xFF00412C),
                    size: 50.0),
              )
            : SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Column(
                    children: <Widget>[
                      FormBuilder(
                        key: _cropfieldKey,
                        child: Column(
                          children: <Widget>[
                            FormBuilderDropdown(
                              icon: Icon(
                                Icons.arrow_drop_down_rounded,
                                size: 30,
                                color: Color.fromARGB(255, 131, 131, 131),
                              ),
                              decoration: InputDecoration(
                                fillColor: Color.fromARGB(255, 238, 238, 238),
                                filled: true,
                                hintStyle: TextStyle(
                                  color: Color.fromARGB(255, 75, 75, 75),
                                ),
                                prefixIcon: Icon(Icons.calendar_month,
                                    color: user.darkTheme
                                        ? Color.fromARGB(255, 123, 206, 22)
                                        : Color(0xFF00412C)),
                                hintText:
                                    AppLocalizations.of(context)!.campaign,
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(5.0),
                                  ),
                                ),
                              ),
                              style: GoogleFonts.roboto(
                                color: user.darkTheme
                                    ? Colors.white
                                    : Color(0xFF00412C),
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                              name: 'campaign',
                              items: snapshot.data[0]
                                  .map<DropdownMenuItem<Object>>(
                                    (campaign) => DropdownMenuItem(
                                      value: campaign['id'],
                                      child: Text(
                                        "${campaign['name']} ${campaign['start_year']}-${campaign['end_year']}",
                                      ),
                                    ),
                                  )
                                  .toList(),
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            FormBuilderTextField(
                              textCapitalization: TextCapitalization.sentences,
                              name: 'name',
                              validator: FormBuilderValidators.required(),
                              decoration: InputDecoration(
                                fillColor: Color.fromARGB(255, 238, 238, 238),
                                filled: true,
                                hintStyle: TextStyle(
                                  color: Color.fromARGB(255, 75, 75, 75),
                                ),
                                prefixIcon: Icon(Icons.abc_outlined,
                                    color: user.darkTheme
                                        ? Color.fromARGB(255, 123, 206, 22)
                                        : Color(0xFF00412C)),
                                hintText: AppLocalizations.of(context)!.name,
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(5.0),
                                  ),
                                ),
                              ),
                              style: GoogleFonts.roboto(
                                color: user.darkTheme
                                    ? Colors.white
                                    : Color(0xFF00412C),
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                            SizedBox(
                              height: 5,
                            ),
                            FormBuilderTextField(
                              textCapitalization: TextCapitalization.sentences,
                              name: 'area',
                              validator: FormBuilderValidators.required(),
                              decoration: InputDecoration(
                                fillColor: Color.fromARGB(255, 238, 238, 238),
                                filled: true,
                                hintStyle: TextStyle(
                                  color: Color.fromARGB(255, 75, 75, 75),
                                ),
                                prefixIcon: Icon(Icons.area_chart,
                                    color: user.darkTheme
                                        ? Color.fromARGB(255, 123, 206, 22)
                                        : Color(0xFF00412C)),
                                hintText: AppLocalizations.of(context)!.area,
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(5.0),
                                  ),
                                ),
                              ),
                              style: GoogleFonts.roboto(
                                color: user.darkTheme
                                    ? Colors.white
                                    : Color(0xFF00412C),
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                            SizedBox(
                              height: 5,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
      ),
    );
  }
}

Current Behavior

Interaction with dropdown triggers a rebuild, which resets the page and in this case shows a loading screen again and also resets the fields. The first time I select the dropdown it rebuilds without showing anything, the second time it works and shows the elements in the dropdown however after choosing an element it rebuilds again and resets the form

Dropdown.rebuild.mp4

Expected Behavior

No rebuilds and for the selected element in the dropdown to be selected correctly.

Steps To Reproduce

Select dropdown and it will rebuild.

Aditional information

Other pages with the same dropdown do not have this issue, I tried deleting any unnecessary code or packages just to find the cause and so far I cannot, even though I have another page with similar code that works. I don't know what I'm missing here.

The code that deals with the API has no issues I checked and it should not trigger a rebuild. I can add more information if necessary, thank you.

[PrathamMittalDE]

I am facing this issue aswell I don;t know whats happening either the formKey field is also missing in the current state.