Pavel_K
December 8, 2022
284 views
0 votes
2 Answers

This is my app bar with one line text:

   appBar: AppBar(
      title: Text("Summer Trip"),
      centerTitle: true,
      actions: [
        PopupMenuButton(
          itemBuilder: (context){
            return [
              PopupMenuItem<int>(
                value: 0,
                child: Text("Test"),
              ),
            ];
          },
        ),

      ],
    ),

And it gives the following result:

As you see the center of the row is about 25 pixels from screen border.

Now I need to add the second line to my title. This is my solution:

    appBar: AppBar(
      toolbarHeight: 70,
      flexibleSpace: SafeArea(
        child: Center(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: Text('Summer Trip',
                    style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 20.0)
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 5),
                child: Text('Step 1',
                    style: TextStyle(color: Colors.white54, fontWeight: FontWeight.normal, fontSize: 14.0)
                ),
              ),
            ],
          ),
        ),
      ),
      actions: [
        PopupMenuButton(
          itemBuilder: (context){
            return [
              PopupMenuItem<int>(
                value: 0,
                child: Text("Test"),
              ),
            ];
          },
        ),
      ],
    ),

And this is the result:

As you see, if we increase toolbarHeight of AppBar then arrow and menu buttons move down. However, I need them to stay at the same position. Could anyone say how to do it?

Answers

You can wrap your widgets with Align widget.

appBar: AppBar(
    toolbarHeight: 70,
    flexibleSpace: SafeArea(
      child: Center(
        child: Column(
          children: const [
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text('Summer Trip',
                  style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                      fontSize: 20.0)),
            ),
            Padding(
              padding: EdgeInsets.only(top: 5),
              child: Text(
                'Step 1',
                style: TextStyle(
                    color: Colors.white54,
                    fontWeight: FontWeight.normal,
                    fontSize: 14.0),
              ),
            ),
          ],
        ),
      ),
    ),
    leading: Align(
      alignment: Alignment.topCenter,
      child: IconButton(
        onPressed: () {},
        icon: const Icon(
          Icons.arrow_back,
        ),
      ),
    ),
    actions: [
      Align(
        alignment: Alignment.topCenter,
        child: PopupMenuButton(
          itemBuilder: (context) {
            return [
              const PopupMenuItem<int>(
                value: 0,
                child: Text("Test"),
              ),
            ];
          },
        ),
      ),
    ],
  ),

Output:

Thanks to @Pavel_K for correcting me, earlier I misunderstood the question.

Corrected Answer

Instead of using flexibleSpace, use title (for the main title) and bottom (for the subtitle). This approach will solve your query, and make the icons stay on top (along the center of the title).

      appBar: AppBar(
        centerTitle: true,
        toolbarHeight: 70,
        leading: const Icon(Icons.arrow_back),
        title: Column(
          children: const [
            Text(
              'Summer Trip',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w500,
                fontSize: 20.0,
              ),
            ),
          ],
        ),
        bottom: const PreferredSize(
          preferredSize: Size(0, 14),
          child: Padding(
            padding: EdgeInsets.only(bottom: 8),
            child: Text(
              'Step 1',
              style: TextStyle(
                color: Colors.white54,
                fontWeight: FontWeight.normal,
                fontSize: 14.0,
              ),
            ),
          ),
        ),
        actions: [
          PopupMenuButton(
            itemBuilder: (context) {
              return [
                const PopupMenuItem<int>(
                  value: 0,
                  child: Text("Test"),
                ),
              ];
            },
          ),
        ],
      ),

Old (incorrect) Answer

I think you are using the flexibleSpace with the incorrect intent; it is meant to be used with FlexibleSpaceBar.

What you want to achieve can be simply achieved using title property of AppBar, and it will center the icon on it’s own.

It will look like this:

      appBar: AppBar(
        centerTitle: true,
        toolbarHeight: 70,
        leading: const Icon(Icons.arrow_back),
        title: Column(
          children: const [
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: Text(
                'Summer Trip',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                  fontSize: 20.0,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 5),
              child: Text(
                'Step 1',
                style: TextStyle(
                  color: Colors.white54,
                  fontWeight: FontWeight.normal,
                  fontSize: 14.0,
                ),
              ),
            ),
          ],
        ),
      ),

Please signup or login to give your own answer.

Click here to cancel reply.

How to fix icons in AppBar when changing toolbarHeight in Flutter?

Answers

Corrected Answer

Old (incorrect) Answer