Search code examples
androidflutterdartmobilecounter

Item Counter with oval/elipse shape in Flutter

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

Solution

  • 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(......),
       ]
     )