How to Show Back Button in Flutter

Published August 03, 2020

How to show back button in flutter screens? How to handle event of the back button.

In this Post we will learn about back button in flutter.

 

Let's get started

Step 1: Create Flutter application

remove all code and make main.dart file like below

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      
    );
  }
}

 

Step 2: Create a widget to show back button

class AppBarBack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          automaticallyImplyLeading: true,
          //`true` if you want Flutter to automatically add Back Button when needed,
          //or `false` if you want to force your own back button every where
          title: Text('AppBar Back Button'),
          leading: IconButton(icon:Icon(Icons.arrow_back),
            onPressed:() => Navigator.pop(context, false),
          )
      ),
      body: Center(
        child: Text("Main Screen"),
      ),
    );
  }
}

 

 

Step 3 : Add Created widget to main.dart file

 

The complete code will like below

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AppBarBack(),
    );
  }
}


class AppBarBack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          automaticallyImplyLeading: true,
          //`true` if you want Flutter to automatically add Back Button when needed,
          //or `false` if you want to force your own back button every where
          title: Text('AppBar Back Button'),
          leading: IconButton(icon:Icon(Icons.arrow_back),
            onPressed:() => Navigator.pop(context, false),
          )
      ),
      body: Center(
        child: Text("Main Screen"),
      ),
    );
  }
}

 

appbar back button

 

 

Q) How to change the appBar back button color?

we can use the iconTheme property from the AppBar , like this

appBar: AppBar(
    iconTheme: IconThemeData(
      color: Colors.pink, //change your color here
    ),
    automaticallyImplyLeading: true,
    //`true` if you want Flutter to automatically add Back Button when needed,
    //or `false` if you want to force your own back button every where
    title: Text('AppBar Back Button'),
    leading: IconButton(icon:Icon(Icons.arrow_back),
      onPressed:() => Navigator.pop(context, false),
    )
)

 

We can handle back button event by below code

leading: IconButton(icon:Icon(Icons.arrow_back),
  onPressed:() => Navigator.pop(context, false),
)

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

8792 Views