📱 Flutter ListTile and ListView: Explained with Easy Examples

Flutter ListTile and ListView:

When you start learning Flutter, two widgets often confuse beginners: ListTile & ListView.
Both are used to display items in a list, but their purpose is different. Let’s break them down in a simple way.

---

🔹 What is ListTile in Flutter?

• ListTile is a ready-made widget used to show a single row (one item).

• It usually contains:

  • title (main text)

  • subtitle (small text under the title)

  • leading (icon/image on the left)

  • trailing (icon/text on the right)

👉 Think of ListTile as a single row card inside a list.

✅ Example of ListTile:

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter ListTile Example")),
        body: const ListTile(
          leading: Icon(Icons.person),
          title: Text("John Doe"),
          subtitle: Text("Flutter Developer"),
          trailing: Icon(Icons.call),
        ),
      ),
    );
  }
}

👉 This will show one row with an icon, name, subtitle, and call button.

---

🔹 What is ListView in Flutter?

• ListView is a widget that can hold multiple items (like ListTiles, Cards, Texts, etc.).

• It is scrollable by default.

• Used when you want to show a list of many items.

👉 Think of ListView as a container that holds multiple widgets (including ListTiles).

✅ Example of ListView:

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter ListView Example")),
        body: ListView(
          children: const [
            ListTile(
              leading: Icon(Icons.person),
              title: Text("Alice"),
              subtitle: Text("UI Designer"),
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text("Bob"),
              subtitle: Text("Backend Developer"),
            ),
            ListTile(
              leading: Icon(Icons.person),
              title: Text("Charlie"),
              subtitle: Text("Mobile Developer"),
            ),
          ],
        ),
      ),
    );
  }
}

👉 This will show a scrollable list of multiple ListTiles.

---

🔹 Difference Between ListTile and ListView

Feature	ListTile 🧩	ListView 📜
Purpose	Shows one row/item	Shows multiple items
Scrollable	❌ No	✅ Yes
Contains Widgets	Text, Icon, Image inside one row	Can contain multiple ListTiles or any widgets
Example Use Case	Contact row, Settings option	Contacts list, Chat list, Product list

---

🎯 Conclusion

• Use ListTile if you need one row with text + icon + subtitle.

• Use ListView if you want to show many rows/items in scrollable list.

• Usually, ListView contains multiple ListTiles.