We have already learnt on previous lesson about moving a screen or page to another in flutter app. Here we learn how to send data to another screen in flutter.
If you learnt how to move a screen to another, then it’s easy to send data to another screen or page in flutter.
While calling a second screen we used like below :
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
Here we didn’t send any data as parameter inside the function class SecondScreen().
While sending data to second screen we add parameter as data inside this calling.
For example: SecondScreen(Your data to second page)
Let’s see the original code:
Here we create a text box (text Field) and a Raised Button named ‘send to second screen’, while we press on the button, then the data on the text field will be send to the second screen.
Table of Contents
Send Data to Another Screen
Here we use a text editing controller named ‘txtController’ to get typed text on the text field.
TextEditingController txtController = TextEditingController();
And we assign the text controller to our text Field.
TextField(
controller: txtController,
),
Finally, we send this text on text controller (txtController.text) to the second screen
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(txtController.text),
));
Getting Data on Second Screen:
There many ways to get and display the received data on second screen.
Here let’s discuss two of them, which is easy to learn and apply.
First of all, you need to create a new screen by creating a new class, here we create a statefulwidget.
Method 1 :
In SecondScreen class, we need to specify the parameter that we sent from first screen like a constructor.
Now we can call the value with widget (widget.variable_name) on build section.
class SecondScreen extends StatefulWidget {
final String mydata;
SecondScreen(this.mydata);
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second screen')),
body:Container(
child: Center(
child:Text(widget.mydata,
style: TextStyle(
fontSize: 30
),),
)
),
);
}
}
Method 2
Specify the parameter name on state class too:
class SecondScreen extends StatefulWidget {
final String mydata;
SecondScreen(this.mydata);
@override
_SecondScreenState createState() => _SecondScreenState(this.something);
}
class _SecondScreenState extends State<SecondScreen> {
String mydata;
_SecondScreenState(this.mydata);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second screen')),
body:Container(
child: Center(
child:Text(mydata,
style: TextStyle(
fontSize: 30
),),
)
),
);
}
}
Full App code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'First screen';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: BuildBody(),
),
);
}
}
class BuildBody extends StatefulWidget {
@override
_BuildBodyState createState() => _BuildBodyState();
}
class _BuildBodyState extends State<BuildBody> {
TextEditingController txtController = TextEditingController();
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(" Type something: "),
new Flexible(
child: new TextField(
controller: txtController,
),
),
],
),
RaisedButton(
child: Text("Send to second screen"),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(txtController.text),
));
},
),
],
)
);
}
}
class SecondScreen extends StatefulWidget {
final String mydata;
SecondScreen(this.mydata);
@override
_SecondScreenState createState() => _SecondScreenState(this.something);
}
class _SecondScreenState extends State<SecondScreen> {
String mydata;
_SecondScreenState(this.mydata);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second screen')),
body:Container(
child: Center(
child:Text(mydata,
style: TextStyle(
fontSize: 30
),),
)
),
);
}
}
Be First to Comment