更改按鈕的背景顏色和文本顏色 onPressed 並在未按下 Flutter 時設置回默認值

Question

我是撲的新手。 我連續有兩個按鈕，我想在按下第一個按鈕時將其顏色和文本更改為其他按鈕，如果按下第二個按鈕，第一個按鈕應恢復為默認顏色，第二個按鈕應轉到新顏色。 有什么辦法可以通過索引來實現這一點嗎？

 Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.max,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      SizedBox(
                        height: 150,
                          width: MediaQuery.of(context).size.width * 0.45,

                        child: RaisedButton(
                          color: primaryColor,
                          onPressed: () {},
                          child: Padding(
                            padding: const EdgeInsets.only(top: 20.0),
                            child: Column(
                              children: [
                                Text('Stunning Solo', style: TextStyle(fontSize: 15,color: Colors.white)),
                                Text('Current Plan', style: TextStyle(fontSize: 12,color: Colors.white)),
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text("\$$dollars3",style: TextStyle(fontSize: 20,color: Colors.white)),
                                ),
                                Text(
                                  "Free forever",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 13,
                                      color: whiteColor),
                                ),

                              ],
                            ),
                          ),
                        ),
                      ),

                      SizedBox(height: 20),

                      SizedBox(
                        height: 150,
                        width: MediaQuery.of(context).size.width * 0.45,

                        child: RaisedButton(
                          color: primaryColor,
                          onPressed:
                              () {},

                          child: Column(
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 20.0),
                                child: Text('Startup Pack', style: TextStyle(fontSize: 15,color: Colors.white)),
                              ),
                              Text('Introductory Offer', style: TextStyle(fontSize: 12,color: Colors.white)),
                              Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    mainAxisSize: MainAxisSize.max,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[

                                      Text(
                                        "\$$dollars",
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 20,
                                            decoration: TextDecoration.lineThrough),
                                      ),
                                      SizedBox(width: 5),
                                      Text(
                                        "\$$dollars2",
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 20,
                                            color: whiteColor),
                                      ),
                                    ]),

Answer 1

您可以為此使用ToggleButton 。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  List<bool> buttonsState = [
    true,
    false
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: ToggleButtons(
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
          color: Colors.blue,
          fillColor: Colors.blue,
          isSelected: buttonsState,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                left: 8,
                right:8,
              ),
              child: Text(
                "Free forever", style: _getTextStyle(0),
                textAlign: TextAlign.center,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: 8,
                right: 8,
              ),
              child: Text(
                "Startup Pack", style: _getTextStyle(1),
                textAlign: TextAlign.center,
              ),
            ),
          ],
          onPressed: _updateButtonState,
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
      ),
    );
  }

  _updateButtonState(int index) {
    setState(() {
      for (int buttonIndex = 0; buttonIndex < buttonsState.length; buttonIndex++) {
        if (buttonIndex == index) {
          buttonsState[buttonIndex] = true;
        } else {
          buttonsState[buttonIndex] = false;
        }
      }
    });
  }

  TextStyle _getTextStyle(int index) {
    return buttonsState[index]
        ? TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20,
        color: Colors.white) : TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20,
        color: Colors.blue);
  }
}

Answer 2

您可以只使用TextButton因為它提供狀態類型。 它也是 FlatButton 的替代品。

例如，如果要更改文本或圖標顏色的foregroundColor ：

TextButton(
  onPressed: onPressed,
  child: Text("label"),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.resolveWith(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed)) {
          return pressedColor;
        } else if (states.contains(MaterialState.selected)) {
          return pressedColor;
        } else if (states.contains(MaterialState.error)) {
          return redPrimary;
        } else if (states.contains(MaterialState.disabled)) {
          return darkSecondary;
        }
        return darkSecondary;
      },
    ),
    ...
  ),
);