CODEWITHSUNDEEP
flutterflutter-layout
esu
esu

Reputation: 2450

How to reduce the title space of AppBar in Flutter

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.

Upvotes: 3

Views: 10981

Answers (2)

Sunil
Sunil

Reputation: 3504

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,
)

Upvotes: -1

Rémi Rousselet
Rémi Rousselet

Reputation: 277657

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);
}

Upvotes: 16

Related Questions