How to Show Back Button in Flutter
Published August 03, 2020How 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"),
),
);
}
}
|
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 :
|
|
|
|
9214 Views |