Horizontal ListView

 import "package:flutter/material.dart";

/// EXAMPLE 1
// void main()
// {
//   runApp(MyApp());
// }
// class MyApp extends StatelessWidget {
//   MyApp({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: "Horizontal ListView",
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         primarySwatch: Colors.grey,
//       ),
//       home: HorizontalDemo(),
//     );
//   }
// }
// class HorizontalDemo extends StatelessWidget {
//   HorizontalDemo({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text("Horizontal ListView"),
//         centerTitle: true,
//       ),
//       body: Container(
//         margin: EdgeInsets.symmetric(vertical: 20.0),
//         height: 100.0,
//         child: ListView(
//           scrollDirection: Axis.horizontal,
//           children: <Widget>[
//             Container(
//               width: 150.0,
//               color: Colors.blue,
//             ),
//             Container(
//               width: 150.0,
//               color: Colors.indigo,
//             ),
//             Container(
//               width: 150.0,
//               color: Colors.brown,
//             ),
//             Container(
//               width: 150.0,
//               color: Colors.grey,
//             ),
//             Container(
//               width: 150.0,
//               color: Colors.teal,
//             ),
//           ],
//         ),
//       ),
//     );
//   }
// }

/// EXAMPLE 2
void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Horizontal ListView",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: AnotherDemo(),
    );
  }
}
class AnotherDemo extends StatelessWidget {
  AnotherDemo({super.key});

  var arrNames = ["Raman", "Raju", "Shubham", "Akhilesh", "Ronak", "Hitanshu", "Rajesh", "Ajay", "Parth",
                  "Hitesh", "Tarang", "Vinit", "Pratik", "Jay"];

  var arrTitle = ["Raman", "Raju", "Shubham", "Akhilesh", "Ronak", "Hitanshu", "Rajesh", "Ajay", "Parth",
    "Hitesh", "Tarang", "Vinit", "Pratik", "Jay"];

  var arrSubTitle = ["Raman", "Raju", "Shubham", "Akhilesh", "Ronak", "Hitanshu", "Rajesh", "Ajay", "Parth",
    "Hitesh", "Tarang", "Vinit", "Pratik", "Jay"];

  var arrIcons = [Icons.adb_sharp, Icons.add_a_photo, Icons.add_alarm, Icons.add_alert, Icons.add_box,
              Icons.add_business, Icons.add_call, Icons.add_card, Icons.add_chart, Icons.add_circle,
              Icons.ac_unit, Icons.access_alarm, Icons.access_time, Icons.accessibility];

  var arrTrailing = [Icons.adb_sharp, Icons.add_a_photo, Icons.add_alarm, Icons.add_alert, Icons.add_box,
    Icons.add_business, Icons.add_call, Icons.add_card, Icons.add_chart, Icons.add_circle,
    Icons.ac_unit, Icons.access_alarm, Icons.access_time, Icons.accessibility];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Horizontal ListView"),
        centerTitle: true,
      ),
      /// ListView.separated(){} Example
      // body: ListView.separated(
      //   scrollDirection: Axis.horizontal,
      //   itemBuilder: (context, index) {
      //     return Padding(
      //       padding: const EdgeInsets.all(15.0),
      //       child: Text(arrNames[index], style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
      //     );
      //   },
      //   itemCount: arrNames.length,
      //   separatorBuilder: (context, index) {
      //     return const Divider(thickness: 4);
      //   }
      // ),

      /// ListView.separated(){} another Example
      body: ListView.separated(
        itemBuilder: (context, index) {
          return ListTile(
            leading: Icon(arrIcons[index]),
            title: Text(arrTitle[index]),
            subtitle: Text(arrSubTitle[index]),
            trailing: Icon(arrTrailing[index]),
          );
        },
        itemCount: arrTitle.length,
        separatorBuilder: (context, index) {
          return const Divider(thickness: 4);
        },
      ),
    );
  }
}