如何在flutter中编码诸如zoomato之类的添加按钮

时间:2019-07-12 05:52:10

标签: flutter dart

我需要实现一个如zoomato的按钮,当我们单击“ +”时,该值应增加,而当我们单击“-”时,该值应减小,并且计算值应显示在“ +”和“ -”。

RawMaterialButton(
  fillColor: Colors.green,
    splashColor: Colors.greenAccent,

    onPressed: onPressed,
    shape:const StadiumBorder(),

    child: Padding(
      padding: const EdgeInsets.all(3.0),
      child: Row(
        children: <Widget>[
          const Icon(
            Icons.add,
            color: Colors.white,
          ),

          Padding(
            padding: const EdgeInsets.all(8.0),
            child:  Text("ADD",
                    style: TextStyle(
                      color: Colors.white,
                    ),
            ),
          ),
          const Icon(
            Icons.remove,
            color: Colors.white,
          )
        ],
      ),
    ));

**但是我不知道如何创建两个不同的按钮 我只需要设计**

1 个答案:

答案 0 :(得分:0)

您可以连续使用IconData(-),Text(5)和IconData(+),如下所示:

Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Expanded(
          child: Material(
        child: IconButton(
            icon: Icon(Icons.remove_circle_outline,
                color: Colors.black),
            onPressed: () {
              _decrementValue(value);
            }),
      )),
      Expanded(
          child: Text(
        '${value}',
        textAlign: TextAlign.center,
      )),
      Expanded(
          child: Material(
        child: IconButton(
            icon: Icon(Icons.add_circle_outline,
                color: Colors.black),
            onPressed: () {
              _incrementValue(value);
            }),
      )),
    ],
  ),
)

在_incrementValue()和_decrementValue()方法中,您可以使用逻辑。