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