In this article, we will go through a detailed explanation and implementation of Flutter appbar leading. We’ll first see what it is and then we’ll customize it.
Introduction: Flutter Appbar Leading
Leading in appbar can be an icon, image, text or other widget in the Flutter appbar.
If you have navigated from one screen to another screen and in the second one, you have defined a flutter appbar then on the left side of the flutter appbar, you will see an arrow flutter icon which if get clicked then it navigates to the previous screen. Let’s understand it using practical code implementations.
Default Flutter Appbar Leading Icon
To implement this, we have used two classes, means screens, in the first one we have specified a flutter raised button, when it gets clicked then we have specified a navigation to the other screen in which we have defined a flutter appbar. Let’s see what we see in the flutter appbar now. As you can see in the above image, we get a default flutter appbar leading icon which is an arrow icon and if we click it then it will navigate to the flutter screen.
Removing Flutter Appbar Leading Icon
appBar: AppBar( automaticallyImplyLeading: false, )
If you don’t want a flutter appbar leading icon by default then you can use the automatically imply leading constructor and set it to false as it takes a Boolean value. By doing that, you won’t see the flutter appbar leading icon again when you navigate to that screen.
Custom Flutter Appbar Leading Widget
leading: Container( color: Colors.red, )
To make a custom leading widget, first let’s see what space the leading icon take. For that, we have used the leading constructor which is used to pass the leading widget in the flutter appbar. We have passed a container with a red color. We can see it in the above image, the flutter appbar leading takes the height of the flutter appbar and have some width.
Custom Flutter Appbar Leading Icon
appBar: AppBar( leading: Icon(Icons.arrow_back) )
We have used a custom flutter appbar leading icon using the leading constructor of the flutter appbar. We can see it in the mentioned above image. We can use other widgets as well like text, image etc. depending on your app requirements. The icon theme data of the flutter appbar is by default white, you can set it to your custom flutter appbar icon color using the icon them data of the flutter appbar.
Congrats, now you have a complete understanding of the flutter appbar leading. You can now use widgets in the flutter appbar leading. As a treat, we have made a beautiful flutter appbar design for you to use in your projects. Hope you will like it. The complete source code for the beautiful flutter appbar design is given below.
Custom Flutter Appbar Leading Source Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Appbar Leading',
home: flutterAppbarColor());
}
}
class flutterAppbarColor extends StatefulWidget {
@override
State<flutterAppbarColor> createState() => _flutterAppbarColorState();
}
class _flutterAppbarColorState extends State<flutterAppbarColor> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
leading: Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(9.0),
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.arrow_back_ios)),
elevation: 0,
title: Text(
'Appbar Leading',
style: TextStyle(color: Colors.blue, fontWeight: FontWeight.w900),
),
actions: [
Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.email)),
Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.logout)),
]),
),
);
}
}Conclusion
That’s all for this article, hope you now have a complete understanding of how to easily customize Flutter appbar leading.
We’d be very glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this article.
