CODEWITHSUNDEEP
dartflutter
Almog
Almog

Reputation: 2837

Flutter how to get subtext aligned under title in appbar?

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

Upvotes: 20

Views: 42350

Answers (8)

Nika
Nika

Reputation: 1049

Wonder why no one mentioned ListTile as a possible solution. It provides both title and subtitle just as we need.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: ListTile(
          title: Center(
            child: Text(
              'Title',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
          ),
          subtitle: Center(
            child: Text(
              'Subtitle',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
          ),
        ),
      ),
      body: const Center(),
    );
  }

Upvotes: 0

Armaan Sandhu
Armaan Sandhu

Reputation: 867

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

Upvotes: 27

Edu
Edu

Reputation: 810

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.

Upvotes: 5

Pedro Massango
Pedro Massango

Reputation: 5005

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

Upvotes: 1

Amaral
Amaral

Reputation: 1

appBar: AppBar(
      title: Center(
        child: Text('Flutter Tutorial'),
      ),

Upvotes: -1

Nguyễn Văn Linh
Nguyễn Văn Linh

Reputation: 398

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

Upvotes: 4

Ashvin solanki
Ashvin solanki

Reputation: 4809

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

Upvotes: 17

attdona
attdona

Reputation: 18923

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.

Upvotes: 20

Related Questions