In Flutter, it’s easy to make the AppBar title to center.
Let’s learn about that by doing below examples.
Contents
1. How To align AppBar Title To Center?
By Default AppBar comes with centerTitle property.
You just need to put true as value, and it will make appbar title into center.
...
AppBar(
title: Text("ANDROIDRIDE"),
centerTitle: true,
),
...
Complete source code is given below.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("ANDROIDRIDE"),
),
body: Container(
child: Center(
child: Text(
'Center AppBar Title Example',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
),
);
}
}
Let’s move on to the next example…
2. How To Make AppBar Title To Center Using Row Widget
In this example, you will learn how to use the Row widget and align the title to center. we won’t use centerTitle property here.
- mainAxisAlignment: MainAxisAlignment.center – It aligns Text widget to center.
- Using this method, you can change the position of Text however you want.
- Use padding widget, if it is not aligned well.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Row(
//children align to center.
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("ANDROIDRIDE"),
],
),
//menu icon
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
actions: [
//search icon
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
)
],
),
),
);
}
3. SliverAppBar Center Title Example
This is not an AppBar Example. SliverAppBar gives extra functionality like animation while scrolling.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter SliverAppBar Center Title Example',
home: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxScrolled) {
return [
SliverAppBar(
//appbar size when it fully expanded.
expandedHeight: 160.0,
//appbar remains visible after scrolling
pinned: true,
floating: false,
flexibleSpace: FlexibleSpaceBar(
//make title centered.
centerTitle: true,
title: Text(
"ANDROIDRIDE",
style: TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
),
];
},
body: Center(
child: Text("Flutter SliverAppBar Center Title Example"),
),
),
),
);
}
- expandedHeight: 160.0 – The maximum size of the appbar when it expanded.
You can easily add an image behind SliverAppBar, using background property. Use the below code inside FlexibleSpaceBar.
background: Image.network(
"https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_1280.jpg",
fit: BoxFit.cover,
),
- You can also use Image.asset() – if you are loading image from the assets.
That’s all for now. Please share it with your friends and family.
Thank you.
Conclusion
Most of the apps nowadays showing titles at the top and center of the AppBar. So the idea is not new and you can easily set it in Flutter. By default, Flutter comes with what we need, Using first example you can easily understand that. If you want to customize a little bit then you can go for the second one. Third one is SliverAppbar example, which gives an animation look. Depends on your need customize it and use it in your app. Using those three examples, I assume you will learn how to center appbar title in Flutter.
