Create & Add Values To String Array List in Flutter Dart Dynamically on Button Click

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.

2. Create void main runApp() method and here we would call our main App class.

3. Creating our main Parent class App extends StatelessWidget. In this class we would call another Child class 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.

5. Creating AppWidgetState extends State<AppWidget> class. This is our main Child class and all the main coding for the app is done here.

6. Creating TextEditingController() named as textFieldValueHolder to get entered value from Text Field widget.

7. Creating a final type String Array List named as data with some random values. We would add values to this array.

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.

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.

10. Creating Widget Build area -> 1 Text Field Widget, 1 ElevatedButton widget and 1 Text widget.

11. Complete source code for main.dart file :-

Screenshots :-

Create & Add Values To String Array List in Flutter Dart Dynamically on Button Click Create & Add Values To String Array List in Flutter Dart Dynamically on Button Click

Leave a Reply

Your email address will not be published. Required fields are marked *