Flutter AppBar actions iconButton overflowed

My AppBar action IconButton is overflowed.

The likesCount parameter changes over time.

How to prevent overflow dynamically, using IconButton in AppBar actions?

My code:

appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {},
            icon: Row(
              children: [
                Text("$likesCount"), <---- overflow in big numbers
                const Icon(Icons.favorite_border),
              ],
            ),
          ),
        ],
      ),

>Solution :

Is it necessary that you can tap in the Text too ? Cause’ you can do it like this :

     AppBar(
        actions: [
          Row(
            children: [
              Text("155.55"),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.favorite_border),
              ),
            ],
          )
        ],
      ),

Make the Row have both the Text and the IconButton

And if you want the Icon and the Text be more close, just add this in the IconButton:

constraints: BoxConstraints(),
padding: EdgeInsets.zero,

Leave a Reply