[Solved] Buttons aligned in a row

Question

Asked by Sher K on December 28, 2021 (source).

How can i align these buttons dynamically that it doesnot go overflow and be responsiveenter image description here

Answer

Question answered by Mostafa M (source).

You can use Wrap widget, like this

Wrap(
  direction: Axis.horizontal,
  alignment: WrapAlignment.start,
  children: <Widget>[
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 1 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 2 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 3 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 4 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 5 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 7 '),
      )),
    Container(
      margin: const EdgeInsets.fromLTRB(20, 0, 0, 10),
      child: ElevatedButton(
        onPressed: () {},
        child: Text(' Button 7 '),
      ))
  ],
)

Video Answers on YouTube

DART FLUTTER
SHARE: