21

Here is my code for AppBar Tittle, but it not Working

 Widget build(BuildContext context){
return new Scaffold(
  appBar: new AppBar(
    title: new Padding(
      padding: const EdgeInsets.only(left: 20.0),
      child: new Text("App Name"),
    ),
  ),
);}

8 Answers 8

31

Set the centerTitle property to false.

1
  • Doesnt seem to work without setting leadingwidth
    – West
    Oct 27, 2021 at 5:13
27

Transform is the widget used for forcefully translating widgets in the x-y-z dimensions.

return Scaffold(
        appBar: AppBar(
          centerTitle: false,
          titleSpacing: 0.0,
          title:  Transform(
              // you can forcefully translate values left side using Transform
              transform:  Matrix4.translationValues(-20.0, 0.0, 0.0),
              child: Text(
                "HOLIDAYS",
                style: TextStyle(
                  color: dateBackgroundColor,
                ),
              ),
            ),
        ),
      );
3
  • If any one using with SliverAppBar -> FlexibleSpaceBar also set centerTitle: false in FlexibleSpaceBar too.
    – Sabeer
    Jun 29, 2021 at 15:25
  • You can also use negative values for title spacing. Sep 15, 2021 at 16:25
  • @Nilesh Athghara's answer is the most elegant answer and contains a working example. I recommend this over the older answer above.
    – Kyle Hayes
    Jul 8, 2022 at 0:05
23

set the centerTile property to false and leadingWidth: 0 in AppBar

1
  • to get the same dimensions of leading widget: leadingWidth: NavigationToolbar.kMiddleSpacing, Mar 30, 2021 at 19:51
10

Simply set the centerTile property to false in AppBar widget.

 AppBar(
        ...
        centerTitle: false,
        title: Text("App Name"),
        ...
        )
6

AppBar title by default is in center positioned. To make text on left you should set property centerTitle false, like this:

Widget build(BuildContext context){
  return new Scaffold(
    appBar: new AppBar(
      centerTitle: false
      title: new Padding(
        padding: const EdgeInsets.only(left: 20.0),
        child: new Text("App Name"),
      ),
    ),
  );
}
3

If you want to show title to very left of appbar

Widget build(BuildContext context){
  return new Scaffold(
    appBar: new AppBar(
      centerTitle: false,
      leadingWidth: 0, // this is also im
      title: new Padding(
        padding: const EdgeInsets.only(left: 25.0),
        child: new Text("App Name"),
      ),
    ),
  );
}

will force text to very left of the appbar

2
appBar: AppBar(
  centerTitle: false,
  backgroundColor: Color(0xff98A8D0),
  title: Image.asset(
    'assets/covalent_dark_icon.png',
    height: 45,
    width: 120,
  ),
)

This is the actual way. Using Transform will make your UI less responsive.

1

For me specifing automaticallyImplyLeading: false fixed the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy