In this blog we will learn about How To Create Group Of Dynamic Textfield In Flutter.
Introduction
In this blog we will learn about how to create group of dynamic textfield in flutter. group of dynamic textfield is useful to create a view which has some group of textfield and we can add in dynamic way to it.
Why Dynamic Group Of TextFields Required?
In many app development scenarios, you might encounter situations where the number of input field needed isn’t know beforehand.
For instance, imagine a form where users can dynamically add or remove input fields base on there requirements.
This is where the ability to create a dynamic group of “TextField” widget become compulsory.
You may also check our Flutter App Development services.
Implementation
We are going to implement dynamic Textfield in flutter , For the Implementation please follow below mention steps.
First of all we need to create a new flutter project and after that we need to create a StatefulWidget(DynamicGroupTextfield) and call it form main.dart.
Add following code inside your StatefulWidget(DynamicGroupTextfield)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
class DynamicGroupTextfield extends StatefulWidget { const DynamicGroupTextfield({Key? key}) : super(key: key); @override State<DynamicGroupTextfield> createState() => _DynamicGroupTextfieldState(); } class _DynamicGroupTextfieldState extends State<DynamicGroupTextfield> { var quantityController = <int, TextEditingController>{}; var valueController = <int, TextEditingController>{}; var item = <int, Widget>{}; @override void dispose(){ super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Dynamic Text Field"), ), body: SingleChildScrollView( child: Column( children: [ Container( padding: EdgeInsets.symmetric(horizontal: 4), height: MediaQuery.of(context).size.height / 1.20, child: item.length != 0 ? Column( children: [ Expanded( child: ListView.builder( shrinkWrap: true, physics: const ScrollPhysics(), itemCount: item.length, itemBuilder: (context, index) { return item.values.elementAt(index); }), ), ], ) : const Center( child: Text("No any Textfield",style: TextStyle(color: Colors.red,fontSize: 16),), ), ), ], ), ), ///Floating action button floatingActionButton: Padding( padding: EdgeInsets.only(bottom: MediaQuery.of(context).size.width/6), child: FloatingActionButton( onPressed: () { addCard(); }, backgroundColor: Theme.of(context).colorScheme.primary, child: const Icon(Icons.add), ), ), ); } } |
The above code is help to display the listing of group of Textfield.
Method to add dynamic group of textfield
To add new card of Textfield we need to create a new method which we have need to add in side DynamicGroupTextfield class.
This method is helpful to add new card which have two Textfield.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
/// This method is useful to add new card which have group of textfield void addCard(){ if (item.keys.isEmpty) { item.addAll({0: newCard(context, 0,true)}); } else { item.addAll({item.keys.last + 1: newCard(context, item.keys.last + 1,true)}); } setState(() {}); } /// This method is helpful to create a new card view. newCard(BuildContext context, int index ,bool isNewCard) { var _quantityController = TextEditingController(text: " "); var _valueController = TextEditingController(text: ""); quantityController.addAll({index: _quantityController}); valueController.addAll({index: _valueController}); return Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(6.0), ), shadowColor: Colors.black, elevation: 3, child: Padding( padding: EdgeInsets.only( left:MediaQuery.of(context).size.width/27, right: MediaQuery.of(context).size.width/27, bottom: MediaQuery.of(context).size.width/27, top: 4, ), child: Column(crossAxisAlignment: CrossAxisAlignment.end, children: [ IconButton( onPressed: () { setState(() { print(item); item.removeWhere((key, value) => key == index); quantityController.removeWhere((key, value) => key == index); valueController.removeWhere((key, value) => key == index); }); }, icon: const Icon(Icons.cancel)), /// Textfield TextFormField( controller: _quantityController, decoration: InputDecoration( fillColor: Theme.of(context).colorScheme.onPrimary, focusColor: Theme.of(context).colorScheme.onPrimary, enabledBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(4)), borderSide: BorderSide( color: Colors.grey, width: 1.5 )), focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(4)), borderSide: BorderSide( color: Colors.grey, width: 1.5, )), errorMaxLines: 2, disabledBorder: const OutlineInputBorder(gapPadding: 0, borderRadius: BorderRadius.zero), isDense: true, label: const Text("Name",style: TextStyle(color: Colors.grey),), labelStyle: TextStyle(color:Theme.of(context) .colorScheme .onPrimary,fontSize: 14 ), ), ), SizedBox(height: 20,), /// Textfield TextFormField( controller: _valueController, decoration: InputDecoration( fillColor: Theme.of(context).colorScheme.onPrimary, focusColor: Theme.of(context).colorScheme.onPrimary, enabledBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(4)), borderSide: BorderSide( color: Colors.grey, width: 1.5 )), focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.all(Radius.circular(4)), borderSide: BorderSide( color: Colors.grey, width: 1.5, )), errorMaxLines: 2, disabledBorder: const OutlineInputBorder(gapPadding: 0, borderRadius: BorderRadius.zero), isDense: true, label: const Text("Email",style: TextStyle(color: Colors.grey),), labelStyle: TextStyle(color:Theme.of(context) .colorScheme .onPrimary,fontSize: 14 ), ), ) ]), )); } |
We need to call this addCard method from add button of app. Above code is helpful to add new card which have two Textfield.
addCard
The addCard is method which is helpful to create a new card which have two textfield and we need to call it on the click of the button.
newCard
This method is helpful to create a new card view which is call inside the addCard method. And in this card have two TextField (Name, Email).
Output
How to create group of Dynamic Textfield in Flutter
Conclusion
In this blog we have discussed about How To Create Group Of Dynamic Textfield In Flutter.
I hope this blog is helpful to UnderStand this topic.
Please visit the Link for more additional information about related this topic.
You can also check other blogs from here for more knowledge.