Flutter Scrolling & List Widgets #

Goal: Learn how to handle scrollable content, dynamic lists, and large datasets efficiently in Flutter.

---

1. ListView #

Displays scrollable linear lists.

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
  ],
)

Types:

• ListView.builder → For large/dynamic data
• ListView.separated → Adds separators between items

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
);

---

2. GridView #

Displays items in a grid (rows & columns).

a. GridView.count #

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

b. GridView.builder #

For large or dynamic grid data.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
  itemCount: 9,
  itemBuilder: (context, index) => Card(child: Center(child: Text('Box $index'))),
)

---

3. SingleChildScrollView #

Used when you have one large widget (like a Column) that needs scrolling.

SingleChildScrollView(
  child: Column(
    children: List.generate(20, (index) => Text('Item $index')),
  ),
)

---

4. CustomScrollView #

Combines multiple scrollable widgets using slivers.

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      expandedHeight: 150.0,
      flexibleSpace: FlexibleSpaceBar(title: Text('Sliver AppBar')),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Sliver Item $index')),
        childCount: 20,
      ),
    ),
  ],
)

---

5. Slivers #

Slivers are building blocks for custom scroll effects.

• SliverList → Scrollable list
• SliverGrid → Scrollable grid
• SliverAppBar → Expandable/Collapsing toolbar

---

6. PageView #

Creates swipeable pages (like onboarding screens).

PageView(
  children: [
    Center(child: Text('Page 1')),
    Center(child: Text('Page 2')),
    Center(child: Text('Page 3')),
  ],
)

---

7. ReorderableListView #

Allows drag-and-drop reordering.

ReorderableListView(
  onReorder: (oldIndex, newIndex) {},
  children: List.generate(
    5,
    (index) => ListTile(key: ValueKey(index), title: Text('Item $index')),
  ),
)

---

8. Scrollbar #

Visually shows the scroll position.

Scrollbar(
  child: ListView.builder(
    itemCount: 30,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

---

💡 Tip:
For mobile responsiveness, always use:

MediaQuery.of(context).size.height
MediaQuery.of(context).size.width

to adjust grid counts, padding, or font sizes based on screen size.