How to randomly position widgets in a layout

825

You could use flutter_staggered_grid_view

  StaggeredGridView.count(
    crossAxisCount: 4,
    children: List.generate(
        3,
        (index) => Center(
              child: CircleAvatar(
                radius: 64,
                backgroundColor: Colors.pink,
              ),
            )),
    staggeredTiles: [
      StaggeredTile.count(2, 2), // takes up 2 rows and 2 columns space
      StaggeredTile.count(2, 1), // takes up 2 rows and 1 column
      StaggeredTile.count(1, 2), // takes up 1 row and 2 column space
    ], // scatter them randomly
  );

enter image description here

Share:
825
Coding Hotel
Author by

Coding Hotel

Updated on December 26, 2022

Comments

  • Coding Hotel
    Coding Hotel over 1 year

    Lets say I want to randomly position the widgets in a specific layout, like in the image attached below, how could I achieve it?

    The Image

    I was thinking of using a wrap widget, but that did not quit work, because it is not randomizing the children in a line. My code until now

    return Wrap(
       spacing: 30,
       children: [
            buildprofile(),
            buildprofile(),
            buildprofile(),
            buildprofile(),
          ],
        );
    
    buildprofile() {
      return Column(
        children: [
          CircleAvatar(
            radius: 64,
            backgroundColor: Colors.pink,
            child: (CircleAvatar(
              radius: 62,
              backgroundImage: NetworkImage(profilepic),
            )),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            "Sivaram",
            style: mystyle(16, Colors.black, FontWeight.w700),
          )
        ],
      );
    }