I'm trying to create a follow button like instagram in flutter but i got a problem.

If user clicks the button for first time, the button state will change. Until this the code is working fine, but now i'm stuck at when user presses the same button which is now from Follow to Following. If he/she presses button, the button would go back to its original state from Following to Follow.

How can i do this?

I'm trying to add listener, but i cant figure it out how to implement this. Now I'm trying to create a function for button in which if it is being pressed for 2nd time from same user it will go back to its original state.

 bool isButtonPressed = false;  
await FirebaseFirestore.instance.collection('users').doc(user!.uid).update({
  'following' : FieldValue.increment(1),
});
await FirebaseFirestore.instance.collection('users').doc(docId).collection('Followers').add({
  'follower' : username,
  'userid' : docid,
  'avatar' : profile,
});
await FirebaseFirestore.instance.collection('users').doc(docId).update({
  'followers' : FieldValue.increment(1),
});
print(docid);

and my button widget code:

 ElevatedButton(
                      onPressed: () async {
                        getCurrentUser();
                        setState(() {
                          isButtonPressed = true;
                        });
                        },
                      style: isButtonPressed ? ElevatedButton.styleFrom(
                        onPrimary: Colors.white24,
                        primary: Colors.white24,
                      ) :
                      ElevatedButton.styleFrom(
                        primary: Colors.blue,
                        onPrimary: Colors.blue,
                      ),
                      child: Padding(
                        padding: EdgeInsets.only(left: 50 ,  right:50 ),
                        child: isButtonPressed ? Text(
                            "Following",
                            style: TextStyle(
                              color: Colors.white,
                            )
                        ) :
                            Text(
                              "Follow",
                              style: TextStyle(
                                color: Colors.white,
                              )
                            )
                      ),
                    ),

CodePudding user response：

Use the DoubleTap gesture I suggest

CodePudding user response：

Use a ToggleButton, no need to reinvent the wheel. https://api.flutter.dev/flutter/material/ToggleButtons-class.html

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),