How to validate and send the data to another page in flutter - flutter

Question

I am a newbie to flutter
and i would to like to create simple input data and pass the data to other page and show the text.
here is my code
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
const appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
const MyForm({Key? key}) : super(key: key);
#override
MyFormState createState() {
return MyFormState();
}
}
class MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2(_formKey)),
);
}
},
child: const Text('Submit'),
),
],
),
);
}
}
class Page2 extends StatelessWidget {
Page2(final data){
this.data = data;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 2'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(this.data),
RaisedButton(
child: Text('BACK'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}
But finally, it gets
The setter 'data' isn't defined for the type 'Page2'.
error
Any idea how to do it??
and what's wrong with my code
Thank you very much.

Answer 1

You can make a global variable and easily use it on other screen. all you need is updating some of your code to the following
final _formKey = GlobalKey<FormState>();
TextEditingController inputController = TextEditingController();
String result;
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
const appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
const MyForm({Key? key}) : super(key: key);
#override
MyFormState createState() {
return MyFormState();
}
}
class MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: inputController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
setState(() {
result = inputController.text;
});
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Page2()),
);
}
},
child: const Text('Submit'),
),
],
),
),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Page 2'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(result),
RaisedButton(
child: Text('BACK'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}

Answer 2

You should define data in Page2, something like this :
class Page2 extends StatelessWidget {
final data = GlobalKey<FormState>();
Page2(final data){
this.data = data;
}

Answer 3

See Send data to a new screen in the Flutter cookbook.