By default the app bar Icon has white color but sometimes app developer wants to modify the icon color according to his requirement. In our previous tutorial we have learn about replacing app bar icon you can read it here and this tutorial is the advance part of app bar icon tutorial. We would use the color property to change the app bar icon color. So in this tutorial we would Flutter Change App Bar Back Button Color in Android iOS Example.
Note: I am using the Icon button library in current tutorial, You can also use your own Image widget or any widget at the place of App bar icon.
Contents in this project Flutter Change App Bar Back Button Color in Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our FirstScreen() class. The FirstScreen is our first home screen for our application.
|
1 2 3 4 5 6 |
void main() { runApp(MaterialApp( title: 'Flutter Navigate to Next Screen', home: FirstScreen(), )); } |
3. Creating our home screen class named as FirstScreen extends StatelessWidget. This is our first screen for our app in this class we would simply create a button and from which we would navigate to next second screen.
- gotoNextActivity : In this function we would use Navigator.push() method with SecondScreen next class name to navigate to next screen.
|
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 |
class FirstScreen extends StatelessWidget { gotoNextActivity(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: () { gotoNextActivity(context); }), ), ); } } |
4. Creating another class named as SecondScreen extends StatelessWidget. This is our second screen for app in which we would replace the app bar icon and changed its color.
-
leading: IconButton(icon:Icon(Icons.home), color: Colors.black,onPressed: () {goBack(context);},) – Is used to modify the icon color and also replacing icon.
|
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 |
class SecondScreen extends StatelessWidget { goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: true, title: Text('Change AppBar Back Button Color'), leading: IconButton(icon:Icon(Icons.home), color: Colors.black, onPressed: () {goBack(context);}, ) ), body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), ); } } |
5. 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 67 68 69 70 71 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Flutter Navigate to Next Screen', home: FirstScreen(), )); } class FirstScreen extends StatelessWidget { gotoNextActivity(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: () { gotoNextActivity(context); }), ), ); } } class SecondScreen extends StatelessWidget { goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: true, title: Text('Change AppBar Back Button Color'), leading: IconButton(icon:Icon(Icons.home), color: Colors.black, onPressed: () {goBack(context);}, ) ), body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), ); } } |
Screenshots:
When we specify ‘leading’ field in appBar, do we need to add automaticallyImplyLeading: true ?? It is working without it.