Let’s talk about how you can develop the mentioned beautiful app bar in flutter but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into the development phase.
Step By Step Explanation
App bar in Scaffold
Scaffold(
)
We must use scaffold, and by using its app bar constructor, we will use our app bar. For that, use the App bar class, which you can see above. Let’s see how our app bar will look after we implement this code:
Background Color of Appbar
Now let’s change the background color of our app bar. Let’s see how we can do it:
AppBar(
)
We use the background color constructor to change the color of the app bar. Let’s see how it looks now:
Height Of Appbar
Now let’s change the height of our app bar. As you can see in the mentioned design, its a bit heighted, so let’s understand, how we can do that:
AppBar(
)
We have used the toolbar height constructor for this, it takes a double but you can also pass an int. It will parse the int to double itself. Let’s see how our app bar is looking right now:
Drawer Icon In Appbar
Let’s see how to implement the drawer icon in app bar.
Scaffold( drawer: Drawer() )
Title In Appbar
Let’s see the implementation of the title text in app bar.
AppBar(
)
Rounded Cornered Appbar
AppBar(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(70),
bottomLeft: Radius.circular(70))
)
)
As we can see in this code, we have used the shape constructor of app bar, and pass it a round rectangle border class, using the constructors of round rectangle border class, we have specified which corners we want to modify. Let’s see our app bar now.
Appbar Elevation
It is used to give some elevation effect to our app bar. We can see there is some shadow that our app bar possess. Let’s seee how we can increase it to match our mentioned app bar’s shadow.
AppBar(
)
We use the elevation constructor for this, you can play with it by giving it more or less value. Our app bar looks like this now.
Actions In Appbar
App bar actions constructor is used to show multiple icons, texts or other widgets in the right end side of app bar. In our case, we have used three icons. Let’s see how we can implement it.
actions: [ Row( children: [ Container( height: 40,width: 40, alignment: Alignment.center, decoration: BoxDecoration( boxShadow: [ BoxShadow(blurRadius: 7,spreadRadius: 3, color: Colors.pink ) ], shape: BoxShape.circle, color: Colors.pink.shade400 ), child: Icon(Icons.search,size: 20, ), ), SizedBox(width: 10,), Container( height: 40,width: 40, alignment: Alignment.center, decoration: BoxDecoration( boxShadow: [ BoxShadow(blurRadius: 7,spreadRadius: 3, color: Colors.pink ) ], shape: BoxShape.circle, color: Colors.pink.shade400 ), child: Icon(Icons.notifications,size: 20, ), ), SizedBox(width: 10,), Container( height: 40,width: 40, alignment: Alignment.center, decoration: BoxDecoration( boxShadow: [ BoxShadow(blurRadius: 7,spreadRadius: 3, color: Colors.pink ) ], shape: BoxShape.circle, color: Colors.pink.shade400 ), child: Icon(Icons.logout,size: 20, ), ), SizedBox(width: 26,) ], ) ],
The actions constructor take a list of widgets, so we have passes three containers to it, if you want to learn how to customize a container then click here. Congrats, you have made the app bar that was mentioned. Let’s see it now.
Complete code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Beautiful Appbar',
debugShowCheckedModeBanner: false,
home: AppBarPage(),
);}}
class AppBarPage extends StatelessWidget {
const AppBarPage({ Key? key }) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.pink.shade400,
toolbarHeight: 100,
elevation: 14,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.only(bottomRight: Radius.circular(70),bottomLeft: Radius.circular(70))
),
title: Text('Let Me Flutter',),
actions: [
Row(
children: [
Container(
height: 40,width: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(blurRadius: 7,spreadRadius: 3,
color: Colors.pink
)
],
shape: BoxShape.circle,
color: Colors.pink.shade400
),
child: Icon(Icons.search,size: 20,
),
),
SizedBox(width: 10,),
Container(
height: 40,width: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(blurRadius: 7,spreadRadius: 3,
color: Colors.pink
)
],
shape: BoxShape.circle,
color: Colors.pink.shade400
),
child: Icon(Icons.notifications,size: 20,
),
),
SizedBox(width: 10,), Container(
height: 40,width: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(blurRadius: 7,spreadRadius: 3,
color: Colors.pink
)
],
shape: BoxShape.circle,
color: Colors.pink.shade400
),
child: Icon(Icons.logout,size: 20,
),
),
SizedBox(width: 26,)
],
)
],
)
),
);
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other widgets and will try to build amazing and beautiful designs. Thanks.
Superb
Thanks and keep supporting.
Thank You
Thanks for the support. Do visit my other articles. Thanks