Item Counter with oval/elipse shape in Flutter

Question

What I'm trying to do is make a counter in Flutter which will be in this shape:

I'm fairly new regarding flutter and dart so I have tried to put this element inside of a Card but yeah I faced some issues due to overflow and it would be great if someone could give me a hint or point me to the right direction.

Here is my code for counter:

Card(child:Row(
        children: <Widget>[
           IconButton(icon:Icon(Icons.remove),onPressed: ()=>setState(()=>_itemCount--)),
           Text(_itemCount.toString()),
             IconButton(icon:Icon(Icons.add),onPressed: ()=>setState(()=>_itemCount++))
        ],
      ),);

Any help would be great, thanks in advance :)

Answer 1

You need to create a variable an assign it to the Text widget, not the function. Increase

int theNumberThatIncreaseOrDecrease = 0;

The function that increments the number:

_itemCountIncrease() {
    setState(() {
        theNumberThatIncreaseOrDecrease += 1;
    });
}

The function that decreases the number:

_itemCountDecrease() {
    setState(() {
        theNumberThatIncreaseOrDecrease -= 1;
    });
}

Your card:

Card(
    child: Row(
        children: <Widget>[
            IconButton(
                icon: Icon(Icons.remove),
                onPressed: () => _itemCountIncrease(),
            ),
            Text(theNumberThatIncreaseOrDecrease.toString()),
            IconButton(
                icon: Icon(Icons.add),
                onPressed: () => _itemCountDecreese(),
            ),
        ],
    ),
)