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

CodePudding user response：

The image supplied doesn't align buttons in a Row, but in a Wrap instead

you can read this article

CodePudding user response：

You can use GridView.Builder for archive this type of layout. Change Spacing and childAspectRatio as per your need. and try below code.

GridView.builder(
                              gridDelegate:
                                  const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 3,
                                crossAxisSpacing: 20,
                                mainAxisSpacing: 20,
                                childAspectRatio: 0.7,
                              ),
                              itemCount: yourList.length,
                              itemBuilder: (BuildContext context, int index) {
return YourButton()}

CodePudding user response：

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 '),
      ))
  ],
)