CODEWITHSUNDEEP
flutter
DanMossa
DanMossa

Reputation: 1082

Add text underneath iconbutton in appbar actions?

I'm currently trying to add the text ('Filter'), underneath an icon inside of the actions field within an AppBar.

Without any text being added underneath it. the action aligned exactly with the text and hamburger menu icon

Example: enter image description here

There are two issues I'm having:

  1. When I add text, the filter icon moves up a little, I want the icon to be the same spot but text added understand.
  2. I'm getting an overflow issue

enter image description here

How can I fix this?

Thanks!

    _appbarActions = [
      Column(
        children: [
          IconButton(icon: const Icon(Icons.filter_alt_outlined), onPressed: () {}),
          Text('Filter'),
        ],
      )
    ];

Upvotes: 1

Views: 695

Answers (1)

Jhakiz
Jhakiz

Reputation: 1609

Try the below snippet code:

  1. To remove the space between IconButton and Text use Icon only;
  2. For the overflow error you can manage the icon size with text fontSize (styles);
  3. For events wrap the column by InkWell widget
Container(
        margin: const EdgeInsets.only(right: 8.0),
        child: InkWell(
          onTap: () {},
          child: Stack(
            children: [
              Center(
                child: Icon(Icons.filter_alt_outlined),
              ),
              Positioned(
                child: Text(
                  'Filter',
                  style: TextStyle(fontSize: 10.0),
                ),
                bottom: 5,
              ),
            ],
          ),
        ),
      )

enter image description here

Upvotes: 1

Related Questions