Flutter / Basic / Navigation : one screen to another screen
Navigation
-
Steps
Navigator.push() & Navigator.pop() //step1 import 'package:flutter/material.dart'; //step2 void main() => runApp(MyApp()); //step3 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); } } //step4 class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } //step5 class MySecondPage extends StatefulWidget { @override _MySecondPageState createState() => _MySecondPageState(); } //step6 class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home - TutorialKart'), ), body: Center( child: RaisedButton( child: Text('Go to Second Screen'), onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => MySecondPage()), ); }, ), ), ); } } //step7 class _MySecondPageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Second Screen'), ), body: Center( child: RaisedButton( child: Text('Go back to Home Screen'), onPressed: () { Navigator.pop(context); }, ), ), ); } } 1. define StatefulWidget 'MyHomePage' & 'MySecondPage' (step4 & step5)
2. define state class '_MyHomePageState' & '_MySecondPageState' for 'MyHomePage' & 'MySecondPage' (step6 & step7)
3. inject StatefulWidget 'MyHomePage' & 'MySecondPage' into state class '_MyHomePageState' & '_MySecondPageState'
4. define appBar and body for each page
5. call MyHomePage() in main() (step3)