flutter_form_builder
flutter_form_builder copied to clipboard
Published
20 hours ago •
flutter-form-builder-ecosystem
flutter-form-builder-ecosystem
FormBuilderDropdown when selected keeps triggering a rebuild
Is there an existing issue for this?
- [X] I have searched the existing issues
Package/Plugin version
9.2.1
Platforms
- [X] Android
- [X] 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
https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/assets/58179305/465af51c-3305-41f2-b345-3256d819feef
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.
I am facing this issue aswell I don;t know whats happening either the formKey field is also missing in the current state.
Maybe because use snapshot to create items? To avoid problems no related with this package (states and other widgets), please create a code to reproduce this error with example https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/blob/main/example/lib/
Thanks
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This issue was closed because it has been stalled for 7 days with no activity.