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

score 37 · Answer 1 · answered Nov 18 '19 at 12:18

37

Set the centerTitle property to false.

answered Nov 18 '19 at 12:18

Patrick Lumenus

1,412
1
15
29

Doesnt seem to work without setting `leadingwidth` – West Oct 27 '21 at 05:13

Jay Mungara · Accepted Answer · 2019-11-18T12:26:50.810

29

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

edited Nov 18 '19 at 12:26

answered Nov 18 '19 at 11:25

Jay Mungara

6,663
2
27
49

If any one using with `SliverAppBar -> FlexibleSpaceBar` also set `centerTitle: false` in `FlexibleSpaceBar` too. – Sabeer Jun 29 '21 at 15:25
You can also use negative values for title spacing. – Arunjith R S Sep 15 '21 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 08 '22 at 00:05

score 23 · Answer 3 · edited Mar 31 '23 at 21:00

23

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

edited Mar 31 '23 at 21:00

TuGordoBello

4,350
9
52
78

answered Nov 01 '20 at 10:27

Bijoya_Banik

387
4
12

to get the same dimensions of leading widget: leadingWidth: NavigationToolbar.kMiddleSpacing, – Skander Hamdi Mar 30 '21 at 19:51

Nilesh Athghara · Answer 4 · 2019-11-18T12:10:57.817

10

Simply set the centerTile property to false in AppBar widget.

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

edited Nov 18 '19 at 12:10

answered Nov 18 '19 at 12:01

Nilesh Athghara

101
6

score 7 · Answer 5 · answered Nov 18 '19 at 11:20

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

Tushar Kshirsagar · Answer 6 · 2021-07-19T10:30:03.297

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

edited Jul 19 '21 at 10:30

answered May 04 '21 at 19:51

Tushar Kshirsagar

239
2
14

score 2 · Answer 7 · edited May 30 '22 at 10:05

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.

edited May 30 '22 at 10:05

Tyler2P

2,324
26
22
31

answered May 29 '22 at 17:21

Kartik Kumar

61
3

score 1 · Answer 8 · answered Sep 21 '22 at 19:11

1

For me specifing automaticallyImplyLeading: false fixed the issue.

answered Sep 21 '22 at 19:11

daniel eidlin

91
5

India_Ink · Answer 9 · 2023-06-13T19:19:31.587

0

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

edited Jun 13 '23 at 19:19

answered Jun 09 '23 at 17:43

India_Ink

13
3

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? – Jeremy Caney Jun 10 '23 at 00:31
You should add explanation.. – Super Kai - Kazuya Ito Jun 12 '23 at 16:26

How To Place AppBar Title in Left Side in Flutter

9 Answers9