3

I have overridden the titleSpacing in the constructor of AppBar. But no difference in the title space.

new AppBar( backgroundColor: Colors.amber, title: new Text("Flying Dutchman", style: new TextStyle( color: const Color(0xFF444444), fontSize: 30.0, fontWeight: FontWeight.w900, ), ), titleSpacing: 0.00, centerTitle: true, elevation: 0.0, ) 

enter image description here

I wish to reduce the top space of the app bar title.

2 Answers 2

16

titleSpacing is not about the actual appbar height and top padding. It's the spacing on the horizontal axis.

AppBar is a prestylized component that follows material rules.

If you don't like these rules, don't use AppBar to begin with. And go create your own component ! :)

Here's an implementation example :

class MyAppbar extends StatelessWidget implements PreferredSizeWidget { final String title; const MyAppbar({this.title}); @override Widget build(BuildContext context) { return new Container( color: Colors.amber, height: preferredSize.height, child: new Center( child: new Text(title), ), ); } @override Size get preferredSize => const Size.fromHeight(40.0); } 
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks Remi. It works fine. But I have to add TabBar in my screen. Thats why I am adding AppBar. I can not rewrite entire code to place my tab bar on this MyAppBar. Is there any other way to reduce size or can I add TabBar without AppBar?
TabBar is just a widget like any others. It doesn't need to be used with Appbar. You can very well add a TabBar to my example.
Thanks, Remi. Works fine. I have added TabBar to the MyAppBar.
So simple, but exactly what I needed!
-1

Just make transform as root of text view and provide x value in nagtive.

new AppBar( backgroundColor: Colors.amber, title:new Transform( transform: new Matrix4.translationValues(-20.0, 0.0, 0.0), child: new Text("Flying Dutchman", style: new TextStyle( color: const Color(0xFF444444), fontSize: 30.0, fontWeight: FontWeight.w900, ), ), ), titleSpacing: 0.00, centerTitle: true, elevation: 0.0, ) 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.