Flutter how to get subtext aligned under title in appbar? - dart

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

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