List Layout

In Flutter, List Layout Widgets allow you to display content in a scrollable list format. These widgets help in creating efficient and scalable lists of varying complexity.

The primary widgets for list layouts are:

ListView
ListTile
ListView.builder

What Are List Layout Widgets?

ListView
- A scrollable list that displays its children in a single column or row.
ListTile
- A single fixed-height row that typically contains text, icons, or leading/trailing widgets.
ListView.builder
- A highly efficient ListView that lazily loads items as they are scrolled into view.

File Structure

To organize the code efficiently, use the following folder structure:

lib/
└── features/
    └── flutter_components/
        └── layout/
            └── list_layout/
                ├── components/
                │   ├── listview_component.dart      
                │   ├── listtile_component.dart      
                │   └── listview_builder_component.dart 
                └── screen/
                    └── list_layout_page.dart

Step 1: Create Components

1. ListView Component

ListView is a simple widget for displaying a list of children.

File: `listview_component.dart`

import 'package:flutter/material.dart';

class ListViewComponent extends StatelessWidget {
  const ListViewComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("ListView Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(
          height: 200,
          child: ListView(
            children: const [
              ListTile(title: Text("Item 1")),
              ListTile(title: Text("Item 2")),
              ListTile(title: Text("Item 3")),
              ListTile(title: Text("Item 4")),
            ],
          ),
        ),
      ],
    );
  }
}

2. ListTile Component

ListTile is a simple way to display rows of text, icons, and other widgets.

File: `listtile_component.dart`

import 'package:flutter/material.dart';

class ListTileComponent extends StatelessWidget {
  const ListTileComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("ListTile Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        const ListTile(
          leading: Icon(Icons.star, color: Colors.blue),
          title: Text("Title 1"),
          subtitle: Text("Subtitle 1"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        const ListTile(
          leading: Icon(Icons.star, color: Colors.green),
          title: Text("Title 2"),
          subtitle: Text("Subtitle 2"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
      ],
    );
  }
}

3. ListView.builder Component

ListView.builder is a more efficient version of ListView that builds items on demand.

File: `listview_builder_component.dart`

import 'package:flutter/material.dart';

class ListViewBuilderComponent extends StatelessWidget {
  const ListViewBuilderComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("ListView.builder Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(
          height: 200,
          child: ListView.builder(
            itemCount: 10, // Number of items
            itemBuilder: (context, index) {
              return ListTile(
                leading: const Icon(Icons.check_circle, color: Colors.purple),
                title: Text("Item ${index + 1}"),
                subtitle: Text("Subtitle ${index + 1}"),
              );
            },
          ),
        ),
      ],
    );
  }
}

Step 2: Combine Components in a Single Screen

In list_layout_page.dart, import and display all components.

File: `list_layout_page.dart`

import 'package:flutter/material.dart';
import '../components/listview_component.dart';
import '../components/listtile_component.dart';
import '../components/listview_builder_component.dart';

class ListLayoutPage extends StatelessWidget {
  const ListLayoutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("List Layout Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            ListViewComponent(),
            SizedBox(height: 20),
            ListTileComponent(),
            SizedBox(height: 20),
            ListViewBuilderComponent(),
          ],
        ),
      ),
    );
  }
}

Widget	Purpose	Best Use Case
ListView	Displays a scrollable list of widgets.	For simple lists where all items are static.
ListTile	Creates a row with text, icons, and widgets.	For displaying structured data like titles and subtitles.
ListView.builder	Dynamically generates list items on demand.	For large lists where items are loaded lazily.

When to Use?

ListView: Use for simple, static lists where all items are known beforehand.
ListTile: Use when displaying rows with text, leading/trailing icons, or additional content.
ListView.builder: Use for large or infinite lists where lazy loading improves performance.

Output

When you run the app, you’ll see:

ListView displaying static items.
ListTile with leading icons, titles, and trailing widgets.
ListView.builder dynamically generating a list of items.