How to check if a button is pressed

Question

I need a like button , when you click it once , the number will increase , but when you click it second time , the number will decrease, how to check if the button is clicked

This is my customer flutter widget exercise

the button widget

lass ButtonBuilder extends StatefulWidget{
  final Icon icon;

  ButtonBuilder({this.icon,});

  _ButtonBuilderState createState()=>_ButtonBuilderState(this.icon);
}

class _ButtonBuilderState extends State<ButtonBuilder>{
  final Icon _icon;

   _ButtonBuilderState(this._icon);

  final _bloc=ButtonCounterBloc();

  @override
  Widget build(BuildContext context) {
    return RootButton(
      child: StreamBuilder(
        stream: _bloc.counter,
        initialData: 0,
        builder: (BuildContext context,AsyncSnapshot snapshot){
          return _buildButton(_icon,'${snapshot.data}');
        },
      ),
    );
  }

  _buildButton(Icon _icon,String _text){
    return Column(
      children: <Widget>[
        IconButton(
          icon: _icon,
          onPressed: ()=>_bloc.buttonEventSink.add(FirstOnPressedEvent()),
        ),
        Text(_text),
      ],
    );
  }
}

the main.dart

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ButtonBuilder(icon: Icon(Icons.thumb_up),),
            ButtonBuilder(icon: Icon(Icons.thumb_down),),
          ],
        ),
      ),
    );
  }
}

i don't know how to check if the button is clicked

Answer 1

You can have a flag called isPressed initially set to false, which is negated everytime the button is pressed.

And inside the onPressed callback, you can write different logic depending on the variable.

But you should keep in mind that in the example below, the _isPressed variable will be reset once the State for the button widet is disposed.

If you wish to have a persistent button, you can add a similar parameter inside ButtonCounterBloc and assign it's value to _isPressed inside the initState method for the _ButtonBuilderState class.

That way your button will be persistent even if the app is restarted or the state is disposed and mounted again.

class ButtonBuilder extends StatefulWidget{
  final Icon icon;

  ButtonBuilder({this.icon,});

  _ButtonBuilderState createState()=>_ButtonBuilderState(this.icon);
}

class _ButtonBuilderState extends State<ButtonBuilder>{
  final Icon _icon;

   _ButtonBuilderState(this._icon);

  final _bloc=ButtonCounterBloc();
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return RootButton(
      child: StreamBuilder(
        stream: _bloc.counter,
        initialData: 0,
        builder: (BuildContext context,AsyncSnapshot snapshot){
          return _buildButton(_icon,'${snapshot.data}');
        },
      ),
    );
  }

  _buildButton(Icon _icon,String _text){
    return Column(
      children: <Widget>[
        IconButton(
          icon: _icon,
          onPressed: () {
            setState(() {
              _isPressed = !_isPressed;
            });
            if(_isPressed) {
              // This block will be executed when button is pressed odd number of times.
              _bloc.buttonEventSink.add(FirstOnPressedEvent());
            } else {
              // This block will be executed when button is pressed even number of times;
            }
          }
        ),
        Text(_text),
      ],
    );
  }
}