Flutter how to get subtext aligned under title in appbar?

user_1178416 0
Viewed 30110

I have the following app bar in flutter and trying to align the subtext "Your desired business name" under the title enter. I have tried different methods but still can't get to align. It should have "enter" at the top and then the subtext aligned center

enter image description here

Here is my current code

Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(75.0), 
          child: AppBar(
            centerTitle: true,
            title: Text('enter'),
            actions: <Widget>[
              new Container(),
              new Center(
                  child: Text(
                'Your desired business name',
                textAlign: TextAlign.center,
                style: new TextStyle(
                  fontSize: 14.0,
                  color: Colors.white,
                ),
              )),
            ],
          )),  
    );
  }
dart flutter
7 Answers

To align Text under AppBar title you can use bottom property of AppBar which takes PreferredSize widget as a parameter which also helps you to adjust the height of AppBar according to your need.

Here's the code

AppBar(
    title: Text('Title 1'),
    centerTitle: true,
    bottom: PreferredSize(
        child: Text("Title 2"),
        preferredSize: Size.zero),
  )

user_105486650

The menu bar actions widgets get aligned on the right and as far as I know it is not possible to obtain your desidered layout.

Should you consider a column based widget with a title and subtitle: 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: new AppBar(
      centerTitle: true,
      title: Column(children: [
        Text(
          "Title",
        ),
        GestureDetector(
          child: Text('subtitle'),
          onTap: () {
            print("tapped subtitle");
          },
        )
      ]),
      ...

In this example there is a GestureDetector for give interactivity to subtitle, since it seems it is what you are trying to do.

user_33567770

I am using this code for adding subtitle and show UserIcon

//name,status and userPic are variable's

@override
  Widget build(BuildContext context) 
  {
    return new Scaffold(
      appBar: new AppBar(
        title: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              name,
              style: TextStyle(color: Colors.white, fontSize: 16.0),
            ),
            Text(
              status,
              style: TextStyle(color: Colors.white, fontSize: 14.0),
            )
          ],
        ),

        leading: new Padding(
          padding: const EdgeInsets.all(5.0),
          child: new CircleAvatar(
            backgroundImage: new NetworkImage(userPicUrl),
          ),
        ),
        actions: <Widget>[new Icon(Icons.more_vert)],
      ),
    );
  }

Output

enter image description here

user_99093650

You should add Column view.

title: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
             Text(
                  "Title",
                   style: TextStyle(color: Colors.white, fontSize: 16.0),
                 ),
             Text(
                 "Sub Title",
                 style: TextStyle(color: Colors.white, fontSize: 14.0),
                 ),
            ]
           ),
user_65905890

In these cases I prefer to use a ListTile:

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar:
      AppBar(
        title:
          ListTile(
            title:
              Text("Enter", style: TextStyle(color:Colors.white)),
            subtitle:
              Text("Your desired business name", style: TextStyle(color:Colors.white)),
          )
      ),
    );
}

If you need the Text widget centered just wrap it within a Center widget.

user_24437730

The answer in https://stackoverflow.com/a/53880971/9185192 works but with null safety landing in Dart it is not allowed to set preferredSize to null.

So the solution is to set preferredSize to zero or any other valid number.

appBar: AppBar(
    title: Text('Title 1'),
    centerTitle: true,
    bottom: PreferredSize(
        child: Text("Title 2"),
        preferredSize: Size.fromHeight(0),
   ),
  )
user_91851920 
appBar: AppBar(
      title: Center(
        child: Text('Flutter Tutorial'),
      ),
user_83099120
Related