Lists, Grids and Scrolling

// Short and fixed: fine to build everything up front
ListView(
  padding: const EdgeInsets.all(16),
  children: const [
    ListTile(leading: Icon(Icons.person), title: Text('Account')),
    ListTile(leading: Icon(Icons.lock), title: Text('Privacy')),
    ListTile(leading: Icon(Icons.info), title: Text('About')),
  ],
)

// Long: only builds what is on screen (plus a small buffer)
ListView.builder(
  itemCount: articles.length,
  itemBuilder: (context, index) {
    final article = articles[index];
    return ListTile(
      title: Text(article.title),
      subtitle: Text('${article.minutes} min read'),
      onTap: () => _open(article),
    );
  },
)

// With dividers — note separatorBuilder gets its own index
ListView.separated(
  itemCount: articles.length,
  separatorBuilder: (context, index) => const Divider(height: 1),
  itemBuilder: (context, index) => ArticleTile(article: articles[index]),
)

// Fixed number of columns — simple, but wrong on tablets
GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
    childAspectRatio: 3 / 4,
  ),
  itemCount: products.length,
  itemBuilder: (context, i) => ProductCard(product: products[i]),
)

// Better: fix the maximum tile width and let the column count follow
GridView.builder(
  padding: const EdgeInsets.all(16),
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 220,
    mainAxisSpacing: 12,
    crossAxisSpacing: 12,
  ),
  itemCount: products.length,
  itemBuilder: (context, i) => ProductCard(product: products[i]),
)

RefreshIndicator(
  onRefresh: () async {
    final fresh = await api.fetchArticles();
    if (!mounted) return;
    setState(() => _articles = fresh);
  },
  child: ListView.builder(
    // Keeps the gesture working even when the list is too short to scroll
    physics: const AlwaysScrollableScrollPhysics(),
    itemCount: _articles.length,
    itemBuilder: (context, i) => ArticleTile(article: _articles[i]),
  ),
)

Dismissible(
  // The key must be stable and unique, or the wrong row disappears
  key: ValueKey(task.id),
  direction: DismissDirection.endToStart,
  background: Container(
    alignment: Alignment.centerRight,
    padding: const EdgeInsets.only(right: 20),
    color: Theme.of(context).colorScheme.errorContainer,
    child: const Icon(Icons.delete_outline),
  ),
  confirmDismiss: (direction) async {
    return await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Delete task?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: const Text('Cancel'),
          ),
          FilledButton(
            onPressed: () => Navigator.pop(context, true),
            child: const Text('Delete'),
          ),
        ],
      ),
    );
  },
  onDismissed: (direction) {
    setState(() => _tasks.remove(task));
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text('Task deleted'),
        action: SnackBarAction(
          label: 'Undo',
          onPressed: () => setState(() => _tasks.insert(index, task)),
        ),
      ),
    );
  },
  child: TaskTile(task: task),
)

ReorderableListView.builder(
  itemCount: _tasks.length,
  onReorder: (oldIndex, newIndex) {
    setState(() {
      // The framework reports newIndex before the removal
      if (newIndex > oldIndex) newIndex -= 1;
      final task = _tasks.removeAt(oldIndex);
      _tasks.insert(newIndex, task);
    });
  },
  itemBuilder: (context, index) {
    final task = _tasks[index];
    return ListTile(
      key: ValueKey(task.id),
      title: Text(task.title),
      trailing: const Icon(Icons.drag_handle),
    );
  },
)

CustomScrollView(
  slivers: [
    // Collapses into a compact bar as you scroll
    SliverAppBar.large(
      title: const Text('Discover'),
      floating: true,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(headerUrl, fit: BoxFit.cover),
      ),
    ),

    // A normal widget inside a sliver world
    const SliverToBoxAdapter(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('Popular this week'),
      ),
    ),

    SliverGrid.builder(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
      ),
      itemCount: featured.length,
      itemBuilder: (context, i) => ProductCard(product: featured[i]),
    ),

    SliverList.builder(
      itemCount: articles.length,
      itemBuilder: (context, i) => ArticleTile(article: articles[i]),
    ),
  ],
)

final _controller = ScrollController();
bool _loadingMore = false;

@override
void initState() {
  super.initState();
  _controller.addListener(_onScroll);
}

@override
void dispose() {
  _controller
    ..removeListener(_onScroll)
    ..dispose();
  super.dispose();
}

void _onScroll() {
  final position = _controller.position;
  // Start loading before the user actually hits the bottom
  if (position.pixels >= position.maxScrollExtent - 400 && !_loadingMore) {
    _loadNextPage();
  }
}