Customize AppBar Like a Pro in 2025
The AppBar is one of the most frequently used widgets in any Flutter application. It provides a consistent place for titles, navigation, and actions. Whether you’re building a simple app or a full-featured platform, a well-designed AppBar plays a vital role in enhancing usability and improving the overall UI experience.
In this SEO-friendly Flutter tutorial, you’ll learn everything about AppBar in Flutter, how to create a custom AppBar, use actions, icons, leading widgets, and even create scrollable and dynamic AppBars with real examples. This is your complete 2025 guide to mastering AppBars in Flutter.
What Is an AppBar in Flutter?
The AppBar widget is a material design component in Flutter that sits at the top of your app screen. It is generally used to:
Show a title
Display actions (like icons or buttons)
Handle navigation back
Show tabs
The AppBar is commonly used inside a Scaffold:
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(child: Text('Hello World')),
);
Default AppBar Properties
Here are the most commonly used AppBar properties:
| Property | Description |
|---|---|
title | The main widget to display in the center |
leading | Widget to display before the title (like back arrow or icon) |
actions | Widgets to display after the title (like icons/buttons) |
backgroundColor | Color of the AppBar |
elevation | Shadow of the AppBar |
centerTitle | Centers the title on both Android & iOS |
automaticallyImplyLeading | Hides back button if set to false |
Basic Example of AppBar:
AppBar(
title: Text(
"Dashboard",
style: TextStyle(color: Colors.white),
),
leading: Icon(Icons.menu, color: Colors.white),
actions: [
IconButton(
icon: Icon(Icons.search, color: Colors.white),
onPressed: () {},
)
],
backgroundColor: Colors.orange,
elevation: 4,
centerTitle: true,
),
How to Create a Custom AppBar in Flutter
Custom AppBars give you complete control over appearance and functionality.
Fully Custom AppBar Using PreferredSize in Flutter
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
final String title;
const CustomAppBar({required this.title});
@override
Size get preferredSize => Size.fromHeight(60.0);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.indigo,
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.menu, color: Colors.white),
Text(title, style: TextStyle(color: Colors.white, fontSize: 20)),
Icon(Icons.settings, color: Colors.white),
],
),
);
}
}
Usage:
Scaffold(
appBar: CustomAppBar(title: "Custom AppBar"),
body: Center(child: Text("Page Content")),
);
AppBar With TabBar (Scrollable)
Using TabBar with AppBar is common in apps with category sections or pages.
DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Tab Navigation"),
bottom: TabBar(
tabs: [
Tab(text: "Home"),
Tab(text: "Profile"),
Tab(text: "Settings"),
],
),
),
body: TabBarView(
children: [
Center(child: Text("Home")),
Center(child: Text("Profile")),
Center(child: Text("Settings")),
],
),
),
);
AppBar With Image, Gradient & Icons
A modern look can be achieved using gradients, background images, or avatars.
AppBar(
title: Text("Welcome"),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
),
),
actions: [
CircleAvatar(
backgroundImage: NetworkImage("https://yourimage.com"),
),
SizedBox(width: 12),
],
);
Bonus: SliverAppBar (Advanced UI)
The SliverAppBar offers collapsing headers and scrolling behavior. Perfect for blogs or e-commerce UIs.
Use it within a CustomScrollView.
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text("Expandable Header"),
background: Image.network(
"https://your-image-url.com",
fit: BoxFit.cover,
),
),
);
FAQs: AppBar in Flutter
You can change the height using PreferredSize:
PreferredSize(
preferredSize: Size.fromHeight(80.0),
child: AppBar(title: Text(‘Custom Height’)),
);
Add following property to remove back button from AppBar:
automaticallyImplyLeading: false,
Yes, set the elevation property to 0:
AppBar(
elevation: 0,
title: Text(“No Shadow”),
);
Wrap AppBar in a Container using the flexibleSpace property:
AppBar(
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.purple, Colors.blue]),
),
),
);
Use the leading widget:
AppBar(
leading: Image.asset(‘assets/logo.png’),
);
Yes. Use:
AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
);
AppBar(
centerTitle: true,
title: Text(“Centered Title”),
);
Your content might not be wrapped in a SafeArea. Wrap your screen inside a SafeArea to avoid overlap.
Conclusion:
Mastering the AppBar in Flutter gives you full control over your app’s navigation and design. Whether you’re building a portfolio app, blog, dashboard, or e-commerce UI, customizing the AppBar allows your design to stand out.
Start with the default AppBar and evolve to building fully custom and dynamic headers. Your users will appreciate the polish and consistency a well-made AppBar adds to your app.
