在 appbar 操作中的图标按钮下方添加文本？

Question

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:

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

How can I fix this?

Thanks!

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

Answer 1

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

---