import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; void main() { runApp(const MyApp()); } const kCountryItems = ['India', 'US', 'Japan']; const kStateItems = [ 'Gujarat', 'Rajasthan', 'Punjab', 'Florida', 'California', 'Texas', 'Kinki', 'Shikoku', 'Tohoku' ]; class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { String? _country = kCountryItems.first; String? _state = kStateItems.first; // Can be used later to manipulate fields final _formKey = GlobalKey<FormBuilderState>(); @override Widget build(BuildContext context) { const gap = SizedBox(height: 12); return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: Container( width: 300, color: Colors.blue.shade100, padding: const EdgeInsets.all(12), child: FormBuilder( key: _formKey, child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ const Text('Form'), gap, CountryInput( initialValue: _country, onChanged: _onCountryChanged, ), gap, StateInput( // ? Enforcing state input to reset/recreate asa `_country` changes key: ValueKey(_country), initialValue: _state, onChanged: _onStateChanged, ), gap, ], ), ), ), ), ); } void _onCountryChanged(String? country) { setState(() { _country = country; // ?? Eventhough state is made null & we used ValueKey() for StateInput to force recreation, it will retain old value !! _state = null; print('(: Country Changed > C:- $_country S:- $_state'); }); } void _onStateChanged(String? state) { _state = state; print('(: State Changed > $_state'); } } class CountryInput extends StatelessWidget { const CountryInput({super.key, this.initialValue, required this.onChanged}); static String id = 'country'; final String? initialValue; final ValueChanged<String?> onChanged; @override Widget build(BuildContext context) { return FormBuilderField<String>( name: CountryInput.id, initialValue: initialValue, builder: (field) => _buildField(field), onChanged: onChanged, ); } Widget _buildField(FormFieldState<String> field) { return DropdownMenu( width: 250, initialSelection: field.value, onSelected: (value) { field.didChange(value); }, dropdownMenuEntries: kCountryItems .map((e) => DropdownMenuEntry<String>(value: e, label: e)) .toList()); } } class StateInput extends StatelessWidget { const StateInput({super.key, this.initialValue, required this.onChanged}); static String id = 'state'; final String? initialValue; final ValueChanged<String?> onChanged; @override Widget build(BuildContext context) { return FormBuilderField<String>( name: StateInput.id, initialValue: initialValue, builder: (field) => _buildField(field), onChanged: onChanged, ); } Widget _buildField(FormFieldState<String> field) { return DropdownMenu( width: 250, initialSelection: field.value, onSelected: (value) { field.didChange(value); }, dropdownMenuEntries: kStateItems .map((e) => DropdownMenuEntry<String>(value: e, label: e)) .toList()); } }