Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter how to get subtext aligned under title in appbar?

Tags:

flutter

dart

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,
                ),
              )),
            ],
          )),  
    );
  }
like image 942
Almog Avatar asked Dec 21 '18 06:12

Almog


People also ask

How do I left align the AppBar title in Flutter?

Simply set the centerTile property to false in AppBar widget.

How do you align the title text in Flutter?

Center Align Title of Flutter Application To center align the title, just wrap the title Text widget inside a Center widget as shown below.


2 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: null),
  )

like image 63
Armaan Sandhu Avatar answered Sep 21 '22 10:09

Armaan Sandhu


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.

like image 24
attdona Avatar answered Sep 23 '22 10:09

attdona