How add buttons horizontally in flutter

userzctE 0
Viewed 58

I'm a beginner and trying to add 3 buttons horizontally I have added but they don't contain "match parent" like in android.

my code  
Row(
                       mainAxisAlignment:MainAxisAlignment.spaceBetween,
                        children: [
                          ElevatedButton(onPressed: () {}, child: const Text("Male")),
                          ElevatedButton(onPressed: () {}, child: const Text("Female")),
                          ElevatedButton(onPressed: () {}, child: const Text("Other")),
                        ],
                      ),

you can view the image image

flutter-android flutter-layout flutter
4 Answers

Wrap each button in an Expanded.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Expanded(child: ElevatedButton(onPressed: () {}, child: const Text("Male"))),
    Expanded(child: ElevatedButton(onPressed: () {}, child: const Text("Female"))),
    Expanded(child: ElevatedButton(onPressed: () {}, child: const Text("Other"))),
  ],
);
Er10

Have Multiple solutions.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
   
  ],
);

Second is.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
  Text("Male"),
  SizedBox(width:10.0),
  Text("Male"),
  SizedBox(width:10.0),
  Text("Male")
  ],
);

And to solve Row Overflow Use Wrap.

Hamza Iqbal0

Try using the following code:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    TextButton(onPressed: () {}, child: const Text("Male")),
    TextButton(onPressed: () {}, child: const Text("Female")),
    TextButton(onPressed: () {}, child: const Text("Other")),
  ],
),
My Car0

Try This Code:

InkWell(
                  onTap: (){},
                  child: SizedBox(
                    height: 60,
                    width:  MediaQuery. of(context). size. width *  0.3,
                    child: Container(
                      margin: EdgeInsets.all(7),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.redAccent)),
                      child: const Center(
                        child: Text(
                          'Male',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                InkWell(
                  onTap: (){},
                  child: SizedBox(
                    height: 60,
                    width: MediaQuery. of(context). size. width * 0.3,
                    child: Container(
                      margin: EdgeInsets.all(7),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.redAccent)),
                      child: const Center(
                        child: Text(
                         'Female',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                InkWell(
                  onTap: (){},
                  child: SizedBox(
                    height: 60,
                    width: MediaQuery. of(context). size. width *0.3,
                    child: Container(
                      margin: EdgeInsets.all(7),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.redAccent)),
                      child: const Center(
                        child: Text(
                         'Other',
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),

Result : https://i.stack.imgur.com/Bbqvs.png

Bhavika0
Related