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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class. In this class we would call our HomeScreen class as Child.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Send Values To Next Screen') ), body: Center( child: HomeScreen() ) ) ); } } |
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.
|
1 2 3 4 5 |
class HomeScreen extends StatefulWidget { HomeScreenState createState() => HomeScreenState(); } |
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.
|
1 2 3 4 |
class HomeScreenState extends State<HomeScreen>{ } |
6. Creating 3 TextEditingController() variable to hold entered value of TextField widget named as name, phoneNumber and studentClass in HomeScreenState class.
|
1 2 3 |
final name = TextEditingController(); final phoneNumber = TextEditingController(); final studentClass = TextEditingController(); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
getItemAndNavigate(BuildContext context){ Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen( nameHolder : name.text, classHolder : studentClass.text, numberHolder : phoneNumber.text )) ); } |
8. Creating Widget Build area and make 3 Text Field widget and 1 Raised Button 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: name, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Name Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: studentClass, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Class Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Phone Number Here'), ) ), RaisedButton( onPressed:()=> getItemAndNavigate(context), color: Color(0xffFF1744), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Send All Entered Items To Next Screen'), ), ], ), )); } |
9. Complete Source code for HomeScreenState class.
|
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 |
class HomeScreenState extends State<HomeScreen>{ final name = TextEditingController(); final phoneNumber = TextEditingController(); final studentClass = TextEditingController(); getItemAndNavigate(BuildContext context){ Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen( nameHolder : name.text, classHolder : studentClass.text, numberHolder : phoneNumber.text )) ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: name, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Name Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: studentClass, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Class Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Phone Number Here'), ) ), RaisedButton( onPressed:()=> getItemAndNavigate(context), color: Color(0xffFF1744), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Send All Entered Items To Next Screen'), ), ], ), )); } } |
10. Creating another class named as SecondScreen extends StatelessWidget. This is our Second Activity screen of application.
|
1 2 3 4 |
class SecondScreen extends StatelessWidget { } |
11. Creating 3 final type variable named as nameHolder, classHolder and numberHolder.
|
1 2 3 |
final nameHolder ; final classHolder ; final 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.
|
1 2 3 4 |
SecondScreen({ Key key, @required this.nameHolder, this.classHolder, this.numberHolder}) : super(key: key); |
13. Creating a function named as goBack(). Using this function we can go Back to previous activity screen on button click event.
|
1 2 3 |
goBack(BuildContext context){ Navigator.pop(context); } |
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.
|
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 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('Student Name = ' + nameHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Class = ' + classHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Phone Number = ' + numberHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), RaisedButton( onPressed: ()=> goBack(context), color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), )]) ); } |
15. Complete Source code for SecondScreen class.
|
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 |
class SecondScreen extends StatelessWidget { final nameHolder ; final classHolder ; final numberHolder ; SecondScreen({ Key key, @required this.nameHolder, this.classHolder, this.numberHolder}) : super(key: key); goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('Student Name = ' + nameHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Class = ' + classHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Phone Number = ' + numberHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), RaisedButton( onPressed: ()=> goBack(context), color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), )]) ); } } |
16. 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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Send Values To Next Screen') ), body: Center( child: HomeScreen() ) ) ); } } class HomeScreen extends StatefulWidget { HomeScreenState createState() => HomeScreenState(); } class HomeScreenState extends State<HomeScreen>{ final name = TextEditingController(); final phoneNumber = TextEditingController(); final studentClass = TextEditingController(); getItemAndNavigate(BuildContext context){ Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen( nameHolder : name.text, classHolder : studentClass.text, numberHolder : phoneNumber.text )) ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: name, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Name Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: studentClass, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Class Here'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: phoneNumber, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Phone Number Here'), ) ), RaisedButton( onPressed:()=> getItemAndNavigate(context), color: Color(0xffFF1744), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Send All Entered Items To Next Screen'), ), ], ), )); } } class SecondScreen extends StatelessWidget { final nameHolder ; final classHolder ; final numberHolder ; SecondScreen({ Key key, @required this.nameHolder, this.classHolder, this.numberHolder}) : super(key: key); goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('Student Name = ' + nameHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Class = ' + classHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), Center(child: Text('Student Phone Number = ' + numberHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), RaisedButton( onPressed: ()=> goBack(context), color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), )]) ); } } |
Screenshots:
Hai, can a textfield have 2 controllers ? Thank you !
Yes sarah but for what purpose you want two controllers ?
Clean and clear tutorial
Thank U mas Bro
How to create controllers if you have unknown number of textfields. Let’s say form is populated based on some json or database rows.
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 ?