I'm honestly new to Flutter and developing. I have been trying to make buttons change colour on tapping for each; it does work, but I have this problem that the buttons take up all the horizontal space. I tried and looked for ways I can. Is there a way I can change the width?

It looks like this:

CodePudding user response：

You prevent your button to get expanded you can warp your ElevatedButton into Center widget then you don't have to assign specific width to your button

ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: isSelected.length,
            itemBuilder: (BuildContext context, int index) {
              return Center(
                child: ElevatedButton(
                  onPressed: () {
                    setState(() => isSelected[index] = !isSelected[index]);
                  },
                  child: Text(
                    "$label ${index   1}",
                    style:
                        TextStyle(fontFamily: "NotoSans", fontSize: 15.0),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: isSelected[index]
                        ? Colors.blue
                        : Colors.transparent,
                    elevation: 0.0,
                    side: BorderSide(
                      color: Colors.white,
                      width: isSelected[index] ? 0 : 1,
                      style: isSelected[index]
                          ? BorderStyle.none
                          : BorderStyle.solid,
                    ),
                  ),
                ),
              );
            })