Flutter 中具有 oval/elipse 形状的项目计数器

Question

我想做的是在 Flutter 中制作一个计数器，它的形状如下：

我对 flutter 和 dart 还很陌生，所以我尝试将这个元素放在 Card 中，但是是的，我遇到了一些由于溢出导致的问题，如果有人能给我提示或指出我，那就太好了向正确的方向。

这是我的计数器代码：

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

任何帮助都会很棒，提前致谢:)

Answer 1

创建一个容器并为其添加装饰。然后在容器内使用行小部件。在行中使用 Iconbutton 和文本 .

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

Answer 2

您需要创建一个变量并将其分配给 Text 小部件，而不是函数。增加

int theNumberThatIncreaseOrDecrease = 0;

增加数字的函数：

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

减少数字的函数：

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

您的卡：

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

Flutter 中具有 oval/elipse 形状的项目计数器

Item Counter with oval/elipse shape in Flutter

mobile

android

counter

dart

flutter