Question 77624 in Flutter Question posted in
The official Flutter documentation can be found here.

How to change color in elevatedbutton when it pressed in flutter?

I’m building a VPN application with flutter. After I click connect, the color of the button already change from blue to red. But when I click disconnect, the color of the button didn’t turn back to blue.

This is my code:

bool isPressed = true;

ElevatedButton(
   onPressed: () async {
      if (state == FlutterVpnState.disconnected) {
         FlutterVpn.connectIkev2EAP(
            server: _addressController.text,
            username: _usernameController.text,
            password: _passwordController.text,
         );
         setState(() {
            isPressed = !isPressed;
         },
         );
      }
      if (state == FlutterVpnState.connected) {
         FlutterVpn.disconnect();
      }
      if (state == FlutterVpnState.error) {
         FlutterVpn.disconnect();
      }
   },
   child: Text(
      state == FlutterVpnState.disconnected? 'Connect' : 'Disconnect',
   ),
   style: ElevatedButton.styleFrom(
      primary: isPressed ? Colors.blue : Colors.redAccent
   ),
),

My question is how to turn back the color to blue?
Thank you in advance for any help.

Tags:

3

Answers


  1. 0

    Try using MaterialStateProperty:

                    ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith<Color>(
                      (Set<MaterialState> states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.green;
                        }

                        return Colors.red;
                      },
                    ),
                  ),
                ),
    Login or Signup to reply.
  2. 0

    try with this code.

    bool isConnected = false;
ElevatedButton(
onPressed: () async {
  if (state == FlutterVpnState.disconnected) {
     FlutterVpn.connectIkev2EAP(
        server: _addressController.text,
        username: _usernameController.text,
        password: _passwordController.text,
     );
        isConnected = true;      
  }
  if (state == FlutterVpnState.connected) {
     FlutterVpn.disconnect();
     isConnected = false;
  }
  if (state == FlutterVpnState.error) {
     FlutterVpn.disconnect();
     isConnected = false;
  }
 
   setState(() {});
},
child: Text(
  state == FlutterVpnState.disconnected? 'Connect' : 'Disconnect',
),
style: ElevatedButton.styleFrom(
  backgroundColor: isPressed ? Colors.blue : Colors.redAccent
 ),
),
    Login or Signup to reply.
  3. 0

    You need to set a bool for offline and online, then just changed the color based on that bool using theme.

    bool isPressed = true;

    ElevatedButton(
      onPressed: () async {
       if (state == FlutterVpnState.disconnected) {
         FlutterVpn.connectIkev2EAP(
            server: _addressController.text,
            username: _usernameController.text,
            password: _passwordController.text,
         );
         setState(() {
            isPressed = true;
         },
         );
      }
      if (state == FlutterVpnState.connected) {
         FlutterVpn.disconnect();

         setState(() {
            isPressed = false;
         },
      }
      if (state == FlutterVpnState.error) {
         FlutterVpn.disconnect();

         setState(() {
            isPressed = false;
         },
      }
   },
   child: Text(
      state == FlutterVpnState.disconnected? 'Connect' : 'Disconnect',
   ),
   style: ElevatedButton.styleFrom(
      primary: isPressed ? Colors.blue : Colors.redAccent
   ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search