Horizontal ListView

main

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  HomeWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final int rowCount = (items.length ~/ 3) + (items.length % 3 != 0 ? 1 : 0);
    var x = List.generate(rowCount, (i) => List.generate(3, (j) => 0, growable: false), growable: false);

    int ind = 0;

    for (var i = 0; i < rowCount; i++) {
      for (var j = 0; j < 3; j++) {
        if (i % 2 != 0 && j == 3 || ind >= items.length) {
          x[i][j] = -1;
        } else {
          x[i][j] = ind;
          ind++;
        }
      }
    }
    return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            children: [
              Container(
                  color: Colors.black,
                  width: double.maxFinite,
                  child: ListTile(
                    contentPadding: EdgeInsets.zero,
                    title: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: const [
                          Text(
                            "Trending",
                            style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 22),
                          ),
                          Text(
                            "See All",
                            style: TextStyle(color: Colors.lime),
                          ),
                        ],
                      ),
                    ),
                    subtitle: SizedBox(
                      height: MediaQuery.of(context).size.height * .4,
                      child: GridView.builder(
                        physics: const PageScrollPhysics(),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1, mainAxisExtent: MediaQuery.of(context).size.width, crossAxisSpacing: 0, mainAxisSpacing: 0),
                        itemCount: (items.length ~/ 3) + (items.length % 3 != 0 ? 1 : 0),
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (context, index) => LayoutBuilder(
                          builder: (p0, p1) => Column(
                            children: [
                              if ((x[index][(index + 0) % 3]) != -1)
                                ItemRowWidget(
                                  model: items[x[index][(index + 0) % 3]],
                                  p1: p1,
                                ),
                              if ((x[index][(index + 1) % 3]) != -1)
                                ItemRowWidget(
                                  model: items[x[index][(index + 1) % 3]],
                                  p1: p1,
                                ),
                              if ((x[index][(index + 2) % 3]) != -1)
                                ItemRowWidget(
                                  model: items[x[index][(index + 2) % 3]],
                                  p1: p1,
                                ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  )),
            ],
          ),
        ));
  }

  final List<ItemModel> items = [
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The 1",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The 2",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay"),
    ItemModel(
        imageUrl: "https://media.istockphoto.com/photos/wild-grass-in-the-mountains-at-sunset-picture-id1322277517?k=20&m=1322277517&s=612x612&w=0&h=ZdxT3aGDGLsOAn3mILBS6FD7ARonKRHe_EKKa-V-Hws=",
        title: "Beat The Odds",
        subtitle: "Lil Tjay")
  ];
}

class ItemRowWidget extends StatelessWidget {
  const ItemRowWidget({
    Key? key,
    required this.model,
    required this.p1,
  }) : super(key: key);

  final ItemModel model;
  final BoxConstraints p1;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
            vertical: 10.0,
          ) +
          const EdgeInsets.only(left: 10, right: 15),
      child: SizedBox(
        height: p1.maxHeight / 4,
        child: Row(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                model.imageUrl,
                width: 80,
                height: 80,
                fit: BoxFit.fill,
              ),
            ),
            const SizedBox(
              width: 16,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  model.title,
                  style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
                ),
                const SizedBox(
                  height: 12,
                ),
                Text(
                  model.subtitle,
                  style: const TextStyle(color: Colors.white54),
                ),
              ],
            ),
            const Spacer(),
            const Icon(
              Icons.play_arrow_rounded,
              color: Colors.white54,
            )
          ],
        ),
      ),
    );
  }
}

class ItemModel {
  final String imageUrl;
  final String title;
  final String subtitle;

  ItemModel({required this.imageUrl, required this.title, required this.subtitle});
}