1
votes

I am new to flutter. I have two buttons in a row and I want to change the colour and the text of the first button when it is pressed to something else and if the second button is pressed the first button should go back to the default colour and the second button should go to the new colour. Is there any way I can achieve this by indexing?

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

2 Answers

1
votes

You can use ToggleButton for this.

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

You can just use TextButton since it provides state type. It is also the replacement of FlatButton.

Example if you want to change foregroundColor which are text or icon color:

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