Hello what I'm trying to do is make a counter in Flutter which will be in this shape:
Im fairly new regarding flutter and dart so what 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 into 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 :)
CodePudding user response:
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(......),
]
)
CodePudding user response:
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(),
),
],
),
)