CODEWITHSUNDEEP
flutterflutter-appbar
user8354119
user8354119

Reputation:

How To Place AppBar Title in Left Side in Flutter

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

Upvotes: 28

Views: 40888

Answers (10)

Munes
Munes

Reputation: 141

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

Upvotes: 0

India_Ink
India_Ink

Reputation: 13

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

Upvotes: 0

Bijoya_Banik
Bijoya_Banik

Reputation: 449

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

Upvotes: 25

daniel eidlin
daniel eidlin

Reputation: 361

For me specifing automaticallyImplyLeading: false fixed the issue.

Upvotes: 2

Kartik Kumar
Kartik Kumar

Reputation: 121

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.

Upvotes: 3

Tushar Kshirsagar
Tushar Kshirsagar

Reputation: 270

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

Upvotes: 3

Jay Mungara
Jay Mungara

Reputation: 7150

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

Upvotes: 36

Patrick Lumenus
Patrick Lumenus

Reputation: 1722

Set the centerTitle property to false.

Upvotes: 47

Nilesh Athghara
Nilesh Athghara

Reputation: 111

Simply set the centerTile property to false in AppBar widget.

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

Upvotes: 11

Nasir Uddin
Nasir Uddin

Reputation: 191

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

Upvotes: 8

Related Questions