Flutter comes with inbuilt method named as Navigator.push() which is used to navigate between multiple screens in flutter mobile application arena. In mobile application screens are also known as Routes or Activities. The navigator class in flutter is used to manage all the routes present in current application and index them one by one so they can be accessed easily via Parent. The screens can be called directly via Class name. There is no need to manage them individually via app developer, this work will automatically done by Flutter. So in this tutorial we would create project in Flutter Navigate to Another Activity Screen on Button Click Example Tutorial. This functionality is also known as Redirect to another Route Screen in Flutter Android iOS mobile app.
Contents in this project Flutter Navigate to Another Activity Screen on Button Click Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create our main void main() runApp() method and call our Home Screen activity class here using home parameter. The void main() method will always calls first every time when flutter app runs so our HomeScreen() class will be our main home screen of app.
|
1 2 3 4 5 6 |
void main() { runApp(MaterialApp( title: 'Flutter Navigate to Another Activity Screen', home: HomeScreen(), )); } |
3. Create a class named as HomeScreen extends StatelessWidget. This would be our first screen of app.
|
1 2 3 4 |
class HomeScreen extends StatelessWidget { } |
4. Create a function named as gotoSecondActivity() with Build Context parameter in HomeScreen class. Inside this function we would call the Navigator.push() method and pass our next Screen class name. We would class this function on button onPress event. So when user press the button it will redirect to given screen class.
|
1 2 3 4 5 6 7 8 |
gotoSecondActivity(BuildContext context){ Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); } |
5. Create 1 Raised button in widget build area in HomeScreen class and call the gotoSecondActivity() function on button onPressed event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Activity Screen'), ), body: Center( child: RaisedButton( child: Text('Navigate To Second Screen'), color: Colors.green, textColor: Colors.white, onPressed: () { gotoSecondActivity(context); }), ), ); } |
6. Create our second screen class named as SecondScreen extends StatelessWidget. This would be our next activity of application.
|
1 2 3 4 |
class SecondScreen extends StatelessWidget { } |
7. Create a function named as goBackToPreviousScreen() with Context parameter in SecondScreen class. In this function we would call the Navigator.pop(context) inbuilt method. This method would kill the current screen and navigate to previous screen.
|
1 2 3 4 5 |
goBackToPreviousScreen(BuildContext context){ Navigator.pop(context); } |
8. Create 1 Raised button in Widget build area of SecondScreen class. We would call the goBackToPreviousScreen() method on button onPressed event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Center( child: RaisedButton( onPressed: () {goBackToPreviousScreen(context);}, color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), ); } |
9. 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 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Flutter Navigate to Another Activity Screen', home: HomeScreen(), )); } class HomeScreen extends StatelessWidget { gotoSecondActivity(BuildContext context){ Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Activity Screen'), ), body: Center( child: RaisedButton( child: Text('Navigate To Second Screen'), color: Colors.green, textColor: Colors.white, onPressed: () { gotoSecondActivity(context); }), ), ); } } class SecondScreen extends StatelessWidget { goBackToPreviousScreen(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Center( child: RaisedButton( onPressed: () {goBackToPreviousScreen(context);}, color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), ); } } |
Screenshot:
