flutter-form-builder-ecosystem / flutter_form_builder

Simple form maker for Flutter Framework
https://pub.dev/packages/flutter_form_builder
MIT License
1.45k stars 526 forks source link

[General]: Field deletion in the dynamic form example is not working properly. #1396

Closed ArturAssisComp closed 1 month ago

ArturAssisComp commented 1 month ago

Is there an existing issue for this?

Package/Plugin version

9.2.1

Platforms

Flutter doctor

Flutter doctor ```bash Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.22.0, on Microsoft Windows [versão 10.0.22631.3593], locale pt-BR) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc4) [√] Chrome - develop for the web [√] Visual Studio - develop Windows apps (Ferramentas de Build do Visual Studio 2022 17.8.0) [√] Android Studio (version 2023.1) [√] Connected device (3 available) [√] Network resources • No issues found! ```

Minimal code example

Code sample ```dart import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; import 'package:form_builder_validators/form_builder_validators.dart'; void main() => runApp(const MaterialApp( home: Scaffold( body: Padding( padding: EdgeInsets.all(8.0), child: DynamicFields(), ), ), )); class DynamicFields extends StatefulWidget { const DynamicFields({Key? key}) : super(key: key); @override State createState() => _DynamicFieldsState(); } class _DynamicFieldsState extends State { final _formKey = GlobalKey(); final List fields = []; String savedValue = ''; @override void initState() { savedValue = _formKey.currentState?.value.toString() ?? ''; super.initState(); } @override Widget build(BuildContext context) { return FormBuilder( key: _formKey, // IMPORTANT to remove all references from dynamic field when delete clearValueOnUnregister: true, child: Column( children: [ const SizedBox(height: 20), FormBuilderTextField( name: 'name', validator: FormBuilderValidators.required(), decoration: const InputDecoration( label: Text('Started field'), ), ), ...fields, const SizedBox(height: 10), Row( children: [ Expanded( child: MaterialButton( color: Theme.of(context).colorScheme.secondary, child: const Text( "Submit", style: TextStyle(color: Colors.white), ), onPressed: () { _formKey.currentState!.saveAndValidate(); setState(() { savedValue = _formKey.currentState?.value.toString() ?? ''; }); }, ), ), const SizedBox(width: 20), Expanded( child: MaterialButton( color: Theme.of(context).colorScheme.secondary, child: const Text( "Add field", style: TextStyle(color: Colors.white), ), onPressed: () { setState(() { fields.add(NewTextField( name: 'name_${fields.length}', onDelete: () { setState(() { fields.removeAt(fields.length - 1); }); }, )); }); }, ), ), ], ), const Divider(height: 40), Text('Saved value: $savedValue'), ], ), ); } } class NewTextField extends StatelessWidget { const NewTextField({ super.key, required this.name, this.onDelete, }); final String name; final VoidCallback? onDelete; @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(bottom: 8), child: Row( children: [ Expanded( child: FormBuilderTextField( name: name, validator: FormBuilderValidators.minLength(4), decoration: const InputDecoration( label: Text('New field'), ), ), ), IconButton( icon: const Icon(Icons.delete_forever), onPressed: onDelete, ), ], ), ); } } ```

Current Behavior

Each added text field has an icon 1 which indicates that, on click, the respective added text field will be deleted. image

But, only the last one is deleted 2.

Expected Behavior

Clicking on a delete icon 1 should remove only the corresponding form text field, even if it was not the last one added.

Steps To Reproduce

  1. Run the script provided

  2. Fill the title field

  3. Add a field and fill it with the value Content0

  4. Add a field and fill it with the value Content1

  5. Add a field and fill it with the value Content2

  6. Press the button Submit The result is: image

  7. Click on the delete button related to "Content1" field: image

  8. Press the button Submit and notice that the field with Content2 was deleted, not the one with Content1 image

Aditional information

No response