In this article, we will be looking at what Flutter appbar title center is and how to easily implement it in our Flutter ap. We will understand it with the help of a practical Flutter code example so we can have a better understanding of it.
Outline
- Introduction: Flutter Appbar Title Center
- Flutter Appbar Title
- Flutter Appbar Title Center Alignment
- Custom Flutter Appbar Source Code
- Conclusion
Introduction: Flutter Appbar Title Center
Flutter appbar title can be used to show a title in the appbar like homepage, post page etc. It’s not supposed to be only a text, instead it can be any other widget like image, container etc.
Flutter appbar has a title constructor which takes a widget. We usually use it to give our appbar a title text but by default, it is aligned to left so if we want the title text to be shown in the center the we need to use another constructor for it.
Let’s now leave the boring part and understand it through proper code implementation.
Flutter Appbar Title
appBar: AppBar(
title: Text('Appbar title'),
)
Flutter Appbar Title Center Alignment
centerTitle: true
Congrats, now you have a complete understanding of how to make the Flutter appbar title center. We have made a beautiful Flutter appbar design for you as a treat.
Don’t hesitate to ask if you still have any questions in mind regarding the implementation of centered title in Flutter appbar. We’ll be very glad to answer all your questions.
The source code is given below in which Flutter appbar title center is also implemented. You can use it in your own apps as well and don’t forget you share your experience here with us using the comment section.
Also, do feel free to customize this design according to the requirements of your own project.
Custom Flutter Appbar 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 Title Center',
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.pink,
toolbarHeight: 70,
centerTitle: true,
leading: Container(
margin: const EdgeInsets.all(8.0),
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.pink,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.arrow_back)),
title: Text(
'Let Me Flutter',
style: TextStyle(fontWeight: FontWeight.w900),
),
actions: [
Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.pink,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.notifications_active)),
Container(
margin: const EdgeInsets.all(8.0),
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.pink,
boxShadow: [
BoxShadow(blurRadius: 5, color: Colors.grey.shade800)
]),
child: Icon(Icons.logout)),
]),
),
);
}
}Conclusion
In conclusion, hope you now have a complete practical idea of how to implement Flutter appbar title center. Don’t forget to share your amazing feedback with us.
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.
