How to solve: ElevatedButton Takes Full Width

Question

Asked by Koltilac on December 24, 2021 (source).

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

Question answered by Diwyansh (source).

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,
                    ),
                  ),
                ),
              );
            })
BUTTON FLUTTER FLUTTER-LAYOUT
SHARE: