在 flutter 中按下時如何改變 elevatedbutton 的顏色？

Question

我正在使用 flutter 構建一個 VPN 應用程序。單擊連接后，按鈕的顏色已經從藍色變為紅色。 但是當我點擊斷開連接時，按鈕的顏色並沒有變回藍色。

這是我的代碼：

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

我的問題是如何將顏色變回藍色？ 預先感謝您的任何幫助。

Answer 1

您需要為離線和在線設置一個布爾值，然后使用主題根據該布爾值更改顏色。

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

Answer 2

嘗試使用MaterialStateProperty ：

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

                        return Colors.red;
                      },
                    ),
                  ),
                ),

Answer 3

嘗試使用此代碼。

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