flutter - 更改onPressed上按钮的背景颜色和文本颜色，并在未按下Flutter时重新设置为默认值

Question

我是新来的 flutter 。我连续有两个按钮，我想在按下其他按钮时更改第一个按钮的颜色和文本，如果按下第二个按钮，则第一个按钮应恢复为默认颜色，第二个按钮应恢复为默认颜色选择新的颜色。有什么办法可以通过索引来实现这一目标？

 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);
  }
}