How to code add button like zoom at in Flutter

Question

I need to implement a button like a zoom at when we click on "+" the value should be incremented and when we click "-" the value should be decremented and the calculate value should be shown in the middle of "+" and "-" on the button.

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,
          )
        ],
      ),
    ));

**but I don't know how to create two different buttons I need just design part **

Shubham, as you might aware, StackOverflow is not a code-writing service and expects you to try to solve your own problem first. Please update your question to show what you have already tried, showing the specific problem you are facing in a [minimal, complete, and verifiable example](https://stackoverflow.com/help/minimal-reproducible-example). For further information, please see [how to ask](https://stackoverflow.com/help/how-to-ask) a good question, and take the [tour](https://stackoverflow.com/tour) of the site. — Sukhi, Jul 12 '19 at 05:57
Have a look in this post: https://stackoverflow.com/questions/50044618/how-to-increment-counter-for-a-specific-list-item-in-flutter — Devbrah, Jul 12 '19 at 05:57

score 0 · Answer 1 · answered Jul 12 '19 at 07:22

In a row, you can use IconData(-), Text(5) and IconData(+) like:

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);
            }),
      )),
    ],
  ),
)

And in _incrementValue() and _decrementValue() method, you can use your logic.

thanks sir, how can i add background color etc, if you use zomato or swiggy when we add any item to our card the button changes form "add +" to " - 1 + " how this works — Shubham Hingne, Jul 12 '19 at 08:12
@ShubhamHingne that's logic part. In _decrementValue(), you can check if the value is 0, then set the Visibility of - button to false or when the value is >0, then sets the visibility to true. While doing all these, use setState() method. — Rohit Singh, Jul 12 '19 at 08:24

How to code add button like zoom at in Flutter

1 Answers1