Flutter how to get subtext aligned under title in appbar?

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


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.


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

Tags:

Dart

Flutter