Introduction to ListTile
The ListTile control in Flutter is a commonly used list item control, which can be used to display each item in the list, usually including title, subtitle, icon and so on. The ListTile control looks and behaves like list items in a ListView in Android.
A simple ListTile example:
ListTile(
leading: Icon(Icons.person), // left icon
title: Text('John Doe'), // title
subtitle: Text('[email protected]'), // subtitle
trailing: Icon(Icons.arrow_forward), // right icon
onTap: () {<!-- -->
// click event handler
},
)
In the above code, we create a ListTile control that contains a left icon, a title, a subtitle and a right icon. We also added a tap event handler to the ListTile by setting the onTap property.
In addition to the properties mentioned above, ListTile has many other properties that can be used to customize its appearance and behavior.
Common attributes:
The ListTile control also provides many other properties that can be used to customize its appearance and behavior. For example, you can set the ListTile’s onTap property to add a click event handler, or you can use the selected property to specify whether the ListTile is selected. The following are some commonly used ListTile properties:
- leading: Used to specify the left icon or image of the ListTile.
- title: Used to specify the title text of the ListTile.
- subtitle: Used to specify the subtitle text of the ListTile.
- trailing: Used to specify the icon or image on the right side of the ListTile.
- onTap: Used to specify the click event handler for the ListTile.
- selected: Used to specify whether the ListTile is selected.
- enabled: Used to specify whether ListTile is available.
- dense: used to specify whether the ListTile should display compact.
- contentPadding: Used to specify the inner margin of ListTile.
- selectedTileColor: Used to specify the background color of the ListTile when it is selected.
- shape: used to specify the shape of ListTile, such as circle or rectangle.
- subtitleTextStyle: Used to specify the style of the subtitle text.
- titleTextStyle: Used to specify the style of the title text.
Use
When building an application with Flutter, you usually need to use various lists, such as item list, setting list, message list, etc. These lists often need to present the data as a scrollable list so that users can easily browse through the list and find the desired data.
Flutter’s ListTile control provides a convenient way to display each item in a list. The ListTile control is an elegant list item control that can contain icons, titles, subtitles, check boxes, radio boxes, switches and other elements. It can be used to build various types of lists, including settings, messages, contacts, shopping carts, and more.
The usage of the ListTile control is very simple, just create an instance of ListTile, and then add it to the list. Here’s an example of a simple ListView with three ListTiles:
ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.account_circle),
title: Text('John Doe'),
subtitle: Text('[email protected]'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Jane Doe'),
subtitle: Text('[email protected]'),
),
ListTile(
leading: Icon(Icons.account_circle),
title: Text('Bob Smith'),
subtitle: Text('[email protected]'),
),
],
)
In the above code, we use the ListView control to create a scrollable list, which contains three ListTile. Each ListTile contains a left icon, a title, and a subtitle that display the user’s name and email address.
In addition to ordinary ListTile, Flutter also provides other types of ListTile, such as CheckboxListTile, RadioListTile, and SwitchListTile. These controls all inherit from ListTile and have the same appearance and behavior, but also have additional functionality, such as switches, check boxes, and radio buttons.
Flutter’s ListTile control is very flexible and powerful, it can be used to display various types of list items, and it also has many customization options to meet various needs.
Use ListTile to implement a setting page
Use ListTile to implement a setting page, the effect is as follows:
The source code is as follows:
import 'package:flutter/material.dart';
class SettingsPage extends StatelessWidget {<!-- -->
@override
Widget build(BuildContext context) {<!-- -->
return Scaffold(
body: ListView(
// padding: EdgeInsets.symmetric(vertical: 16),
children: [
Container(
padding: EdgeInsets. all(16),
color: Colors.grey[200],
child: Row(
children: [
CircleAvatar(
radius: 40,
backgroundImage: AssetImage('assets/profile_image.jpg'),
),
SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'The breeze on the river and the moon in the mountains',
style: TextStyle(fontSize: 18),
),
Text(
'User ID: 123456',
style: TextStyle(fontSize: 14, color: Colors.grey),
),
],
),
],
),
),
// SizedBox(height: 16),
// Container(
// color: Colors. gray,
// child: SizedBox(
// height: 16,
// child: Text(
// 'Hello, SizedBox!',
// style: TextStyle(color: Colors. white, fontSize: 10),
// ),
// ),
// ),
SettingItem(icon: Icons.person, title: 'personal information'),
Divider(indent: 60,),
SettingItem(icon: Icons.lock, title: 'Account and Security'),
Divider(indent: 60,),
SettingItem(icon: Icons.notifications, title: 'message notification'),
Divider(indent: 60,),
SettingItem(icon: Icons.language, title: 'language'),
Divider(indent: 60,),
SettingItem(icon: Icons.language, title: 'language'),
Divider(indent: 60,),
SettingItem(icon: Icons.language, title: 'language'),
Divider(indent: 60,),
SettingItem(icon: Icons.language, title: 'language'),
Divider(indent: 60,),
SettingItem(icon: Icons.language, title: 'language'),
Divider(indent: 60,),
// add more settings...
],
),
);
}
}
class SettingItem extends StatelessWidget {<!-- -->
final IconData icon;
final String title;
const SettingItem({<!-- -->required this.icon, required this.title,});
@override
Widget build(BuildContext context) {<!-- -->
return ListTile(
leading: Icon(icon),
title: Text(title),
trailing: Icon(Icons. arrow_forward_ios),
onTap: ()=>{<!-- -->},
);
}
}