Flutter Send Multiple TextField Value From One Screen To Another Example Tutorial

In our previous tutorial we have send ListView value from one activity to another but some of our users wants to pass multiple values from one activity to another. So for them we are not creating another tutorial. In this tutorial we would Flutter Send Multiple TextField Value From One Screen To Another in Android iOS Example Tutorial. We would use simple Navigator.push() inbuilt method to navigate to next activity screen and use the MaterialPageRoute() method to send data along with it. This tutorial is very useful for beginners who wish to transfer multiple type of data between screens. So let’s get started 🙂 .

Contents in this project Flutter Send Multiple TextField Value From One Screen To Another Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

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

3. Creating our main MyApp class. In this class we would call our HomeScreen class as Child.

4. Crating HomeScreen extends StatefulWidget class. In this Class we would make createState() method and pass next HomeScreenState class along with it. We are using TextField Text Input widgets in HomeScreenState class so we have to make this class State mutable.

5. Creating HomeScreenState extends State. This is our First Screen for app. In this class we would create all the 3 TextField widgets with 1 Raised Button.

6. Creating 3 TextEditingController() variable to hold entered value of TextField widget named as name, phoneNumber and studentClass in HomeScreenState class.

7. Create a function named as getItemAndNavigate() with Context parameter. In this function we would First navigate to SecondScreen class and send all the 3 TextField Text Input entered values to next screen.

8. Creating Widget Build area and make 3 Text Field widget and 1 Raised Button widget.

9. Complete Source code for HomeScreenState class.

10. Creating another class named as SecondScreen extends StatelessWidget. This is our Second Activity screen of application.

11. Creating 3 final type variable named as nameHolder, classHolder and numberHolder.

12. Creating class constructor with same name of class SecondScreen. Using the Constructor we would receive the pass value from previous screen and stored into all 3 final variables.

13. Creating a function named as goBack(). Using this function we can go Back to previous activity screen on button click event.

14. Creating Widget Build Area and now we would make 3 Text widgets and 1 Raised Button widget. Using the Text widget we would display the passed value from previous screen.

15. Complete Source code for SecondScreen class.

16. Complete source code for main.dart file:

Screenshots:

Flutter Send Multiple TextField Value From One Screen To Another Example Tutorial Flutter Send Multiple TextField Value From One Screen To Another Example Tutorial

5 Comments

  1. Hai, can a textfield have 2 controllers ? Thank you !

  2. Clean and clear tutorial
    Thank U mas Bro

  3. How to create controllers if you have unknown number of textfields. Let’s say form is populated based on some json or database rows.

  4. I have one layout in which I have a list of widgets and each widget contains one TextField. How in the parent widget I get value of all input fields ?

Leave a Reply

Your email address will not be published.