ElevatedButton Takes Full Width

Question

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: https://ibb.co/rFNfSf4

class Home extends StatefulWidget {
      @override
      State<Home> createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
      List<bool> isSelected = [false, false, false, false];
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.grey[850],
            appBar: AppBar(
              title: Text(
                "A Sample Quiz",
                style: TextStyle(
                  letterSpacing: 1.3,
                  fontFamily: "SourceCodePro",
                ),
              ),
              centerTitle: true,
              backgroundColor: Colors.grey[900],
              elevation: 2.0,
            ),
            body: Center(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 20.0,
                  ),
                  Text(
                    "Choose all that apply:",
                    style: TextStyle(
                      fontFamily: "NotoSans",
                      letterSpacing: 1.2,
                      fontSize: 18.0,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    height: 9.0,
                  ),
                  answerButtonBoxes("Answer"),
                ],
              ),
            ),
          ),
        );
      }
    
      Column answerButtonBoxes(String label) {
        return Column(
          children: [
            ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: isSelected.length,
                itemBuilder: (BuildContext context, int index) {
                  return 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,
                        ),
                      ),
                  );
                }),
          ],
        );
      }
    }

Answer 1

You prevent your button to get expanded you can wrap 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,
                    ),
                  ),
                ),
              );
            })