Listview and Listtile are basic widgets, which are used to make a scrollable lists of item in a mobile app. They are essential component for building app where we need various type of lists, such as menus, chat message lists and etc.
ListView: Listview is a widget used to create a scrollable list of children. It can hold a list of widgets and automatically handles scrolling when the content exceeds the available space.
ListTile: Listtile widget is designed to represent a single item within a list. It typically contains title, subtitle, leading or trailing icon and can be made tappable.
Key Properties of listTile:
- Title: The primary content of the list item.
- Subtitle: Optional secondary content.
- leading: A widget display before the title.
- trailing: A widget display after the title.
- Ontap: A callback function that is triggered when the listtile tapped.
Both Listview and Listtile are highly customizable, and you can style them according to the app design requirements. They are versatile and widely used in Flutter app development for presenting list of data or options to users in an organized and user-friendly manner.
body: Container(
margin: const EdgeInsets.fromLTRB(0, 10, 8, 0),
child: ListView(
itemExtent: 70.0,
children: [
ListTile(
title: Text(
"Top Faculties(UITS)",
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold, color: Colors.red),
textAlign: TextAlign.center,
),
),
ListTile(
leading: Container(
height: double.infinity,
child: Icon(Icons.computer)
),
title: Text(
"Computer Science",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text("We are the first it university......"),
trailing: Text("300000"),
onTap: () {},
),
ListTile(
leading: Container(
height: double.infinity,
child: Icon(Icons.medical_information)
),
title: Text(
"Pharmacy",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text("We have best medicine......"),
trailing: Text("450000"),
onTap: (){},
),
ListTile(
leading: Container(
height: double.infinity,
child: Icon(Icons.electric_bolt)
),
title: Text(
"Electrical Engineering",
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text("Our students works at best....."),
trailing: Text("500400"),
onTap: (){},
)
],
),
),
Comments
Post a Comment