😜 Yo!

A couple of days, I was building a simple app that takes data from an API and displays them on the screen. A simple app though.

Then I needed to add some height to my appBar. Well you might suggest

...toolbarHeight:100.0,title:Text('Yo! Title here'),...

but what if I want to customize my title, add some color, and use the properties across other screens well I don't want to go through thectrl c & ctrl v kinds of stuff.

Here is what I did

1. Created a widget directory inside my lib folder
2. Created a new custom_appBar.dart file

import'package:flutter/material.dart';classMyAppbarextendsStatelessWidgetwithPreferredSizeWidget{@overridefinalStringtitle;finalSizepreferredSize;MyAppbar(this.title,{Keykey}):preferredSize=Size.fromHeight(100.0),super(key:key);@overrideWidgetbuild(BuildContextcontext){returnAppBar(title:Text(title,style:TextStyle(color:Colors.white)),backgroundColor:Colors.white38,);}}

My newMyAppbar class extend thestatelessWidget. you also noticed I havewith PreferredSizeWidget right? Yea! this is because the Scaffold takes in a PreferredSizeWidget and not the AppBar class directly.

Then I set my constructor like so

...MyAppbar(this.title,{Keykey}):preferredSize=Size.fromHeight(100.0),super(key:key);...

Lastly, my build method returns the AppBar class and there I can now set my AppBar properties

Now I can import and reuse my newly customized MyAppbar everywhere on my app

...appBar:MyAppbar('Title goes here!'),...

I also recommend checking this medium article too 👍

Flutter: Increase the power of your AppBar & SliverAppBar | by Diego Velasquez | Flutter Community | Medium

Diego Velasquez ・Jun 8, 2019 ・

Medium