Item Counter with oval/elipse shape in Flutter

user_12886858 0
Viewed 88

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

enter image description here

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 :)

dart flutter counter mobile android
2 Answers

Create a container and add decoration to it. Then inside the container use a row widget. In row use Iconbutton and text .

 Container(
   padding : EdgeInsets.all(7),
    decoration:BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      color: Colors.grey,
     ),
     child: Row(
      mainAxisSize: MainAxisSize.min,
       children:[
          IconButton(.....),
          Text(......),
          IconButton(......),
       ]
     )
user_171690370

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(),
            ),
        ],
    ),
)
user_93252390
Related