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

Deerskin

Do you need a width according to text of the button of a fixed width? – Lukash

@Lukash I don't need a specific width, but I don't want it to be as wide as the page. – Deerskin

Check my answer once. – Lukash

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

Lukash

Using this with fixedSize within ElevatedButton allows me to specify the size, too. Thank you! – Deerskin

Answer 2

You can just wrap your button in a FittedBox.

Like this:

FittedBox(
    child: ElevatedButton(
        child: Text("GO"),
        onPressed: () {},
    ),
),

Corneous

Answer 3

Try below code and set fixedSize of button.

Refer ElevatedButton here

   ElevatedButton(
          style: ElevatedButton.styleFrom(
            fixedSize: const Size(
              200,
              50,
            ),
          ),
          onPressed: () {
            print('Button Presssed');
            // add your onPressed function here
          },
          child: const Text(
            'Button',
          ),
        ),

Your result screen->

Christianity

Didn't know we can add a fixed size; thank you so much! – Deerskin

If your problem is solved by my answer then accept and upvote my answer. Thanks – Christianity

I'm new here, so it says I need reputation to do so, but my request was gone to feedback. – Deerskin

Just click on check icon on answer refer this – Christianity

Actually, despite the code and the width parameter I change, it still takes up all of the space horizontally. – Deerskin

Answer 4

You can refactor Elevated Button with Padding like this,

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 40.0),
      child: ElevatedButton();

Navigable

I tried other widgets like sizedbox and expanded but didn't know this could work; thank you! – Deerskin

Answer 5

Try This

 return SizedBox(
      width: double.infinity,
      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,
                          ),
                        ),
                    ),
    );

Pictorial