ListTile

 /// ListTile components : leading, Title & Subtitle, Trailing

import "package:flutter/material.dart";

void main() {
  runApp(MyApp(),);
}
class MyApp extends StatelessWidget {
  const MyApp({super.key,});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "ListTile in Flutter",
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: TileDemo(),
    );
  }
}
class TileDemo extends StatelessWidget {
  TileDemo({super.key,});

  var arrNames = ["Krishna", "Ajay", "Shivani", "Akash", "Jay", "Amar", "Raman", "Nisha", "Kuldeep",
    "Ramanujan","Ram", "Veer", "Pankaj", "Mahesh", "Bhavesh", "Rajesh", "Prakash",];

  List listNames = ["Name 1", "Name 2", "Name 3", "Name 4", "Name 5", "Name 6", "Name 7", "Name 8", "Name 9",
  "Name 10", "Name 11", "Name 12", "Name 13", "Name 14", "Name 15", "Name 16", "Name 17",];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListTile Demo"),
      ),
      // body: ListView.separated(itemBuilder: (context, index) {
      //   return Container(
      //     //decoration: BoxDecoration(border: Border(top: BorderSide(),),),
      //     child: ListTile(
      //       //shape: OutlineInputBorder(),
      //       // leading: Text("$index", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),),
      //       leading: Text("${index + 1}", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),),
      //       title: Text(arrNames[index], style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),),
      //       subtitle: Text("Name"),
      //       trailing: Icon(Icons.add, color: Colors.black, size: 30.0,),
      //     ),
      //   );
      // },
      //   itemCount: arrNames.length,
      //   separatorBuilder: (context, index) {
      //   return Divider(height: 50, thickness: 2,);
      //   },
      // ),


      ///   New ListTile
      body: ListView.separated(itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(10.0),
          child: ListTile(
            //shape: OutlineInputBorder(),
            shape: RoundedRectangleBorder(side: BorderSide(width: 2, color: Colors.amber,),
            borderRadius: BorderRadius.circular(50),
            //   borderRadius: BorderRadius.horizontal(
            //     left: Radius.elliptical(50, 50), right: Radius.elliptical(50, 50),
            //   ),
            ),
            leading: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("${index + 1}", style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),),
            ),
            title: Text(arrNames[index], style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),),
            subtitle: Text("${listNames[index]}",),
            trailing: Icon(Icons.add, color: Colors.black, size: 40.0,),
          ),
        );
      },
        separatorBuilder: (context, index) {
        return Divider(height: 0, thickness: 0,);
        },
        itemCount: arrNames.length,
      ),
    );
  }
}