ListView ListTile

 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: "ListView ListTile",
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         primarySwatch: Colors.brown,
//       ),
//       home: ListDemo(),
//     );
//   }
// }
//
// class ListDemo extends StatelessWidget {
//   ListDemo({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: const Text("ListView"),
//         centerTitle: true,
//       ),
//       body: Center(
//         child: ListView(
//           children: <Widget>[
//             ListTile(
//               leading: Icon(Icons.account_box),
//               title: Text("Account Box"),
//               subtitle: Text("Account Box"),
//               trailing: Icon(Icons.add),
//               onTap: (){},
//             ),
//             ListTile(
//               leading: Icon(Icons.map),
//               title: Text("Map"),
//               subtitle: Text("Map"),
//               trailing: Icon(Icons.add),
//               onTap: (){},
//             ),
//             ListTile(
//               leading: Icon(Icons.phone),
//               title: Text("Phone"),
//               subtitle: Text("Phone"),
//               trailing: Icon(Icons.add),
//               onTap: (){},
//             ),
//           ],
//         ),
//       ),
//     );
//   }
// }

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

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

  var arrColors = ["Orange", "Yellow", "Grey", "Black", "White", "Black", "Pink", "Brown", "Teal"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListView Demo"),
        centerTitle: true,
      ),
      /// ListView
      // body: ListView(
      //   scrollDirection: Axis.horizontal,
      //   // reverse: true,
      //   children: [
      //     Padding(
      //       padding: const EdgeInsets.all(8.0),
      //       child: Text("One", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
      //     ),
      //     Padding(
      //       padding: const EdgeInsets.all(8.0),
      //       child: Text("Two", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
      //     ),
      //     Padding(
      //       padding: const EdgeInsets.all(8.0),
      //       child: Text("Three", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
      //     ),
      //     Padding(
      //       padding: const EdgeInsets.all(8.0),
      //       child: Text("Four", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
      //     ),
      //     Padding(
      //       padding: const EdgeInsets.all(8.0),
      //       child: Text("Five", style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),
      //     ),
      //   ],
      // ),

      /// ListView.builder(){}
      // body: ListView.builder(
      //   itemBuilder: (context, index){
      //     return Text(arrColors[index], style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),);
      //   },
      //   itemCount: arrColors.length,
      //   itemExtent: 200.0,
      // ),

      /// ListView.separated(){}
      body: ListView.separated(
        // scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(15.0),
            child: Text(arrColors[index], style: const TextStyle(fontSize: 20.0,fontWeight: FontWeight.bold)),
          );
        },
        itemCount: arrColors.length,
        separatorBuilder: (context, index) {
          return const Divider(thickness: 4, height: 100.0);
        },
      ),
    );
  }
}