I'm new to Flutter. So I hope that someone can answer this question with a simple example.
Here is my small example.
Main Page
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'secondpage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Start(),
debugShowCheckedModeBanner: true,
);
}
}
class Start extends StatelessWidget {
int number;
double contheight = 150.0;
double contwidht = 200.0;
double contfontsize = 25.0;
@override
Widget build(BuildContext context) {
// Deactivate Android back button
return new WillPopScope(
onWillPop: () async => false,
// return: Scaffold(
child: Scaffold(
backgroundColor: Colors.white,
body: ListView(
children: <Widget>[
AppBar(
elevation: 0,
title: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Main Screen', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0)),
],
),
),
centerTitle: true,
backgroundColor: Colors.green, // Override the back arrow button
),
SizedBox(height: 50.0),
Column(
children: <Widget>[
Container(
height: 500.0,
decoration: BoxDecoration(
color: Colors.white,
),
child: ListView(
primary: false,
padding: EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0, bottom: 40.0),
children: <Widget>[
// Row - 1
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: contheight,
width: contwidht,
decoration: BoxDecoration(
border: Border.all(
color: Colors.green,
style: BorderStyle.solid,
width: 1.0),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Colors.green),
child: FlatButton(
onPressed: (){
number = 1;
Navigator.push(
context,
MaterialPageRoute(builder: (context) => secondpage(number: this.number)),
);
},
child: Center(
child: Text('1',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: contfontsize))),
),
),
],
),
SizedBox(height: 30.0),
// Row - 2
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: contheight,
width: contwidht,
decoration: BoxDecoration(
border: Border.all(
color: Colors.green,
style: BorderStyle.solid,
width: 1.0),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Colors.green),
child: FlatButton(
onPressed: (){
number = 2;
Navigator.push(
context,
MaterialPageRoute(builder: (context) => secondpage(number: this.number)),
);
},
child: Center(
child: Text('2',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: contfontsize))),
),
),
],
),
],
),
),
],
),
],
),
),
);
}
}
Second Page
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'main.dart';
import 'datapage.dart';
// // Use this data to test
// final List wordsenglish =[
// 'to eat',
// 'to speak',
// 'to drink',
// ];
//
// final List words =[
// 'comer',
// 'hablar',
// 'beber',
// ];
// int n = words.length;
class secondpage extends StatefulWidget {
secondpage({this.number});
int number;
@override
_secondpageState createState() => _secondpageState(number);
}
class _secondpageState extends State<secondpage> {
int number;
_secondpageState(this.number);
int i = 0;
double contheight = 150.0;
double contwidht = 200.0;
double contfontsize = 25.0;
// Import data before build (what I want to happen...) - Start
List wordsenglish;
List words;
int n;
void asyncMethod() async {
await getThedata(number);
}
@override
void initState() {
asyncMethod();
super.initState();
}
// Import data before build (what I want to happen...) - End
@override
Widget build(BuildContext context) {
// Deactivate Android back button
return new WillPopScope(
onWillPop: () async => false,
// return: Scaffold(
child: Scaffold(
backgroundColor: Colors.white,
body: ListView(
children: <Widget>[
AppBar(
elevation: 0,
title: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Second Page', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25.0)),
],
),
),
centerTitle: true,
backgroundColor: Colors.green,
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Start()),
);
},
),// Override the back arrow button
),
SizedBox(height: 50.0),
Column(
children: <Widget>[
Container(
height: 450.0,
decoration: BoxDecoration(
color: Colors.white,
),
child: ListView(
primary: false,
padding: EdgeInsets.only(top: 40.0, left: 40.0, right: 40.0, bottom: 40.0),
children: <Widget>[
// Row - 1
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: contheight,
width: contwidht,
decoration: BoxDecoration(
border: Border.all(
color: Colors.green,
style: BorderStyle.solid,
width: 1.0),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Colors.green),
child: Center(
child: Text(wordsenglish[i],
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: contfontsize))),
),
],
),
SizedBox(height: 30.0),
// Row - 2
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: contheight,
width: contwidht,
decoration: BoxDecoration(
border: Border.all(
color: Colors.green,
style: BorderStyle.solid,
width: 1.0),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
color: Colors.green),
child: Center(
child: Text(words[i],
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.white,
fontSize: contfontsize))),
),
],
),
],
),
),
],
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
i = (i + 1) % n;
});
},
child: Icon(Icons.arrow_forward, color: Colors.black), // icon
backgroundColor: Colors.red,
),
),
);
}
}
