Hello friends, few months ago I had posted a tutorial on Creating Array List in Flutter Dart. Now today we are improvising that old example and making some changes on it. Friends, Today we would add a new functionality in our old example and add values to string array list in flutter dart dynamically on button click event. To make sure user know that all the values is adding successfully in Array list we would print List on screen using Text widget.
We are using Text Field widget to get input from application user. Like when user enters any random value in Text Input widget and user press the Button then first it will check the Text Field widget is empty or not then it will enter the value in Array List and update the Array on screen.
Contents in this project Create & Add Values To String Array List in Flutter Dart Dynamically on Button Click :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main App class.
|
1 |
void main() => runApp(App()); |
3. Creating our main Parent class App extends StatelessWidget. In this class we would call another Child class AppWidget().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Add Values in String Array in Flutter"), ), body: SafeArea( child: Center( child: AppWidget(), ))), ); } } |
4. Creating AppWidget extends StatefulWidget. In this class we would make the createState() method along with next Child class AppWidgetState(). To enable State management in given class.
|
1 2 3 4 |
class AppWidget extends StatefulWidget { @override AppWidgetState createState() => AppWidgetState(); } |
5. Creating AppWidgetState extends State<AppWidget> class. This is our main Child class and all the main coding for the app is done here.
|
1 2 3 4 5 |
class AppWidgetState extends State<AppWidget> { } |
6. Creating TextEditingController() named as textFieldValueHolder to get entered value from Text Field widget.
|
1 |
final textFieldValueHolder = TextEditingController(); |
7. Creating a final type String Array List named as data with some random values. We would add values to this array.
|
1 |
final List<String> data = <String>['A', 'B', 'C', 'D']; |
8. Creating a function named as showAlert with Class Context. We would use this method to show Alert dialog on screen when user clicks on button and the Text Field widget is empty.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Please Enter Value in Text Field.'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } |
9. Creating a function named as addValue(). In this function first we would check whether the Text Field widget is empty or not using if condition then use the List.add(‘Value’) method to enter value in array list.
|
1 2 3 4 5 6 7 8 9 10 |
void addValue() { if (textFieldValueHolder.text == '') { showAlert(context); } else { setState(() { data.add(textFieldValueHolder.text); }); print(data); } } |
10. Creating Widget Build area -> 1 Text Field Widget, 1 ElevatedButton widget and 1 Text widget.
|
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 |
Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textFieldValueHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), )), Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(12), textStyle: TextStyle(fontSize: 22), ), child: Text('Add Value To String Array'), onPressed: addValue, ), ), Text( '${data.join("," + " ")}', style: TextStyle(fontSize: 20, color: Colors.black), textAlign: TextAlign.center, ) ], )); } |
11. Complete source code for main.dart file :-
|
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 |
import 'package:flutter/material.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Add Values in String Array in Flutter"), ), body: SafeArea( child: Center( child: AppWidget(), ))), ); } } class AppWidget extends StatefulWidget { @override AppWidgetState createState() => AppWidgetState(); } class AppWidgetState extends State<AppWidget> { final textFieldValueHolder = TextEditingController(); final List<String> data = <String>['A', 'B', 'C', 'D']; showAlert(BuildContext context) { showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text('Please Enter Value in Text Field.'), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } void addValue() { if (textFieldValueHolder.text == '') { showAlert(context); } else { setState(() { data.add(textFieldValueHolder.text); }); print(data); } } Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textFieldValueHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), )), Container( margin: const EdgeInsets.all(10), child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.lightBlue, padding: EdgeInsets.all(12), textStyle: TextStyle(fontSize: 22), ), child: Text('Add Value To String Array'), onPressed: addValue, ), ), Text( '${data.join("," + " ")}', style: TextStyle(fontSize: 20, color: Colors.black), textAlign: TextAlign.center, ) ], )); } } |
Screenshots :-
Thank you!
Welcome 🙂 .