Hướng dẫn và ví dụ Flutter ListTile

ListTile
Ví dụ đơn giản
Sử dụng ListTile với Card và ListView
Các biến thể của ListTile

Trong Flutter, ListTile là một thành phần giao diện người dùng, nó có cấu trúc giống hình minh hoạ dưới đây:

ListTile

ListTile có chiều rộng lấp đầy chiều rộng của phần tử cha và vùng "Center" của nó có xu hướng mở rộng chiều rộng nhiều nhất có thể.

ListTile có thể được sử dụng một cách độc lập hoặc được sử dụng như một phần tử của ListView.

Flutter ExpansionTile

1. ListTile

Constructor của ListTile:

ListTile({
  Key key,
  Widget leading,
  Widget title,
  Widget subtitle,
  Widget trailing,
  bool isThreeLine: false,
  bool dense,
  VisualDensity visualDensity,
  ShapeBorder shape,
  EdgeInsetsGeometry contentPadding,
  bool enabled: true,
  GestureTapCallback onTap,
  GestureLongPressCallback onLongPress,
  MouseCursor mouseCursor,
  bool selected: false,
  Color focusColor,
  Color hoverColor,
  FocusNode focusNode,
  bool autofocus: false,
});

2. Ví dụ đơn giản

Ví dụ dưới đây là một ListTile đơn giản với hai trạng thái "được lựa chọn" và "không được lựa chọn".

listtile_ex1.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool _selected = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListTile Demo'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.grey[100],
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(color: Colors.indigo.withAlpha(30)),
          child: ListTile(
            leading: const Icon(
              Icons.account_circle,
              size: 50,
            ),
            title: const Text(
              'User Profile',
              style: TextStyle(fontSize: 24),
            ),
            trailing: const Icon(Icons.arrow_forward_ios),
            subtitle: const Text('Show and edit profile'),
            selected: _selected,
            onTap: () {
              _selected = !_selected;
              setState(() {});
            },
          ),
        ),
      ),
    );
  }
}

3. Sử dụng ListTile với Card và ListView

Bạn có thể sử dụng ListTile cùng với ListView và Card. Trong đó:

ListTile được bao bọc trong một Card.
ListView được sử dụng để hiển thị danh sách các Card(s).

Một ListTile được bao bọc bởi một Card:

category_tile.dart

import 'package:flutter/material.dart';

class CategoryTile extends StatelessWidget {
  String categoryTitle;
  int videoCount;
  Icon icon;
  CategoryTile({
    required this.categoryTitle,
    required this.videoCount,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white,
      child: ListTile(
        leading: Container(
          width: 46,
          height: 46,
          decoration: ShapeDecoration(
            color: Colors.indigo.withAlpha(40),
            shape: const CircleBorder(),
          ),
          child: icon,
        ),
        title: Text(categoryTitle),
        subtitle: Text("$videoCount Videos"),
        trailing: Icon(
          Icons.arrow_forward_ios,
          color: Colors.indigo.withAlpha(120),
        ),
        onTap: () {},
      ),
    );
  }
}

Một ListView hiển thị danh sách các Card(s):

listtile_ex2.dart

import 'package:flutter/material.dart';
import 'package:listtile/category_tile.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ListView and ListTile Demo'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.grey[120],
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            CategoryTile(
              categoryTitle: 'Arts',
              videoCount: 100,
              icon: Icon(Icons.brush, color: Colors.red),
            ),
            CategoryTile(
              categoryTitle: 'Emotional Development',
              videoCount: 100,
              icon: Icon(Icons.monitor_heart, color: Colors.red),
            ),
            CategoryTile(
              categoryTitle: 'Health',
              videoCount: 80,
              icon: Icon(Icons.health_and_safety_outlined, color: Colors.red),
            ),
          ],
        ),
      ),
    );
  }
}

Hướng dẫn và ví dụ Flutter ListView
Hướng dẫn và ví dụ Flutter Card

4. Các biến thể của ListTile

Flutter cũng hỗ trợ một vài biến thể thường dùng của ListTile:

Hướng dẫn và ví dụ Flutter RadioListTile
Hướng dẫn và ví dụ Flutter CheckboxListTile
Hướng dẫn và ví dụ Flutter SwitchListTile