So I have a container with 9 ElevatedButtons (code shown below) i would like to change the color of the selected button, but there can only be 1 selected button at a time, how would i go about doing this? So if one button is selected the button will go green, but if another button in the container is clicked it will revert back the color of the previously selected color and change the current selected button to green.

here is the container with the elevated buttons:

Container(
                  padding: EdgeInsets.all(25),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(20)),
                      color: Colors.white),
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("10.000"))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("20.000"))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("50.000"))),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 20),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("100.000"))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("250.000"))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("500.000"))),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 20),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("750.000"))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("1.000.000", style: TextStyle(fontSize: 13)))),
                              ),
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Material(
                              elevation: 2,
                              child: InkWell(
                                onTap: (){},
                                child: Container(
                                    padding: EdgeInsets.all(15),
                                    child: Center(child: Text("2.000.000", style: TextStyle(fontSize: 13)))),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),

If i have to guess I would think I would need to put it inside of a map, but I'm not sure how to go about doing this. I would prefer to learn the manual implementation but if needed i'm fine with using packages if needed.

CodePudding user response：

For this work You can use ChoiceChip instead of using Material Button directly

A material design choice chip.

ChoiceChips represent a single choice from a set. Choice chips contain related descriptive text or categories.

class MyThreeOptions extends StatefulWidget {
  const MyThreeOptions({Key? key}) : super(key: key);

  @override
  State<MyThreeOptions> createState() => _MyThreeOptionsState();
}

class _MyThreeOptionsState extends State<MyThreeOptions> {
  int? _value = 1;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: List<Widget>.generate(
        3,
        (int index) {
          return ChoiceChip(
            label: Text('Item $index'),
            selected: _value == index,
            onSelected: (bool selected) {
              setState(() {
                _value = selected ? index : null;
              });
            },
          );
        },
      ).toList(),
    );
  }
}

CodePudding user response：

create a new StatefulWidget and just return a button inside that. call the functions and api's in that file only. and call this class name as the child instead ofyour old button. Works for me.