Search code examples
flutterscaffoldiconbutton

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,