So, I have a custom "list" of an albums that contain its cover and title and I want to make it responsive, because Row() is just a Row and does not put albums in a new row if album does not fit to a user's interface width.
Pretend, that this is user's phone and its bound is [] and each album is represented with a dot and I want to do something like this:
four albums, the last one does not fit and moves to a next row

[...]
[.  ]

How could I implement this?

My current code:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      body: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(padding: EdgeInsets.all(10)),
            const Text(
              "My library",
              textAlign: TextAlign.left,
              textDirection: TextDirection.ltr,
              style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 30),
            ),
            Padding(padding: EdgeInsets.all(10)),
            Container(
                child: ListView(
                    shrinkWrap: true,
                    children: ListTile.divideTiles(
                            context: ctx,
                            tiles: [
                              const ListTile(
                                leading: Icon(Icons.music_note_outlined),
                                title: Text("Loved tracks"),
                                trailing: Text("148"),
                                dense: true,
                                visualDensity: VisualDensity(vertical: -3),
                              ),
                              const ListTile(
                                  leading: Icon(Icons.person),
                                  title: Text("Loved artists"),
                                  trailing: Text("3"),
                                  dense: true,
                                  visualDensity: VisualDensity(vertical: -3)),
                              const ListTile(
                                leading: Icon(Icons.album_sharp),
                                title: Text("Loved albums"),
                                trailing: Text("5"),
                                dense: true,
                                visualDensity: VisualDensity(vertical: -3),
                              ),
                              const ListTile(
                                leading: Icon(Icons.timelapse),
                                title: Text("Recent"),
                                dense: true,
                                visualDensity: VisualDensity(vertical: -3),
                              ),
                              const ListTile(
                                dense: true,
                                visualDensity: VisualDensity(vertical: -3),
                              ),
                            ],
                            color: const Color.fromARGB(171, 189, 189, 189))
                        .toList())),
            Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: _buildAlbumList(10),
            )
          ]),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.house), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: "Search"),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline_outlined),
              label: "Profile"),
        ],
        currentIndex: 0,
      ),
    );
  }
}

List<Widget> _buildAlbumList(int n) {
  List<Widget> list = [];

  for (int i = 0; i < n; i  ) {
    list.add(
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.network("cover.png"),
          const Text(
            "Title",
            textAlign: TextAlign.left,
          ),
        ],
      ),
    );
  }
  return list;
}

do not mind the code, this is a sketch

CodePudding user response：

Using Wrap provide the responsive behavior of getting items to the next row.

Instead of

 Row(
   crossAxisAlignment: CrossAxisAlignment.stretch,
  children: _buildAlbumList(10),
  )

Use

 Wrap(
  alignment: WrapAlignment.start,
  crossAxisAlignment: WrapCrossAlignment.start,
  children: _buildAlbumList(10),
  )

Find more about Wrap.