How To Place AppBar Title in Left Side in Flutter

Question

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

Sardonyx

Answer 1

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

Citrange

If any one using with SliverAppBar -> FlexibleSpaceBar also set centerTitle: false in FlexibleSpaceBar too. – Howardhowarth

You can also use negative values for title spacing. – Diastema

@Nilesh Athghara's answer is the most elegant answer and contains a working example. I recommend this over the older answer above. – Richard

Answer 2

Set the centerTitle property to false.

Prittleprattle

Doesnt seem to work without setting leadingwidth – Cicely

Answer 3

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

Junco

to get the same dimensions of leading widget: leadingWidth: NavigationToolbar.kMiddleSpacing, – Pahang

Answer 4

Simply set the centerTile property to false in AppBar widget.

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

Bors

Answer 5

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

Allow

Answer 6

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

Anonym

Answer 7

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.

Mayor

Answer 8

For me specifing automaticallyImplyLeading: false fixed the issue.

Catenoid

Answer 9

Use titleSpacing for left offset(padding). But it’s not best approach i just want to show another way.

AppBar(
           ...
           centerTitle: false,
           titleSpacing: -40,
           title: Text("App Name"),
           ...
           ),

Butchery

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? – Solorzano

You should add explanation.. – Blockage

Answer 10

None of these solutions worked for me as I had two lines of text and each line has a different style, my solution was to use a RichText to correctly align the text to the left, and use different styles for each line. If I didn't use the RichText and just put two Text widgets inside a Column, no matter what I did the text still aligned centre, just on the left side of the AppBar.

    appBar: AppBar(
    centerTitle: false,
    titleSpacing: 16.0,
    title: RichText(
      text: TextSpan(
        text: "Good morning,\n",
        style: textTheme.bodySmall,
        children: [
          TextSpan(
            text: "Alexandra",
            style: textTheme.headlineSmall,
          ),
        ],
       ),
     ),
    ),  

Burnette