Dart Flutter , , , , , , , , ,

Como Usar Sliver Widgets no Flutter para Layouts Avançados

Introdução

Os Sliver Widgets no Flutter permitem criar layouts altamente customizáveis e eficientes. Eles são fundamentais para construir listas e layouts com rolagem avançada, como cabeçalhos expansíveis, listas com diferentes comportamentos de rolagem e muito mais.

Neste tutorial, vamos explorar o uso dos principais widgets de Sliver no Flutter, entender como eles funcionam e implementar um exemplo prático.

—

1. O Que São Slivers?

Slivers são componentes de layout usados dentro de um CustomScrollView. Eles permitem construir estruturas de rolagem dinâmicas, onde cada seção pode ter um comportamento diferente.

Os widgets Sliver mais comuns incluem:

  • SliverAppBar – Cabeçalho expansível
  • SliverList – Lista otimizada para rolagem
  • SliverGrid – Grelha (grid) flexível
  • SliverPersistentHeader – Cabeçalhos fixos ou expansíveis

—

2. Criando um Exemplo com SliverAppBar

Vamos construir um layout com um cabeçalho expansível (SliverAppBar) e uma lista de itens abaixo.


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const SliverExampleScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('SliverAppBar'),
              background: Image.network(
                'https://source.unsplash.com/random/800x600',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text('Item \$index'),
                subtitle: const Text('Descrição do item'),
              ),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

—

3. Adicionando um SliverGrid

Podemos adicionar um SliverGrid para criar uma grade flexível dentro do mesmo CustomScrollView:


SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    childAspectRatio: 1.5,
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Container(
        color: Colors.blueAccent,
        child: Center(
          child: Text(
            'Grid Item \$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
      );
    },
    childCount: 6,
  ),
),

Isso adiciona uma grade flexível após a lista.

—

4. SliverPersistentHeader

Podemos adicionar um cabeçalho fixo que permanece visível ao rolar a tela:


SliverPersistentHeader(
  pinned: true,
  delegate: _SliverAppBarDelegate(
    minHeight: 50,
    maxHeight: 100,
    child: Container(
      color: Colors.orange,
      child: const Center(child: Text('Cabeçalho Fixo')),
    ),
  ),
),

O cabeçalho é fixo e permanece visível mesmo quando a lista rola.

—

5. Boas Práticas

  • Use SliverList em vez de ListView dentro de CustomScrollView para melhor desempenho.
  • Combine Slivers para criar layouts responsivos e dinâmicos.
  • Utilize SliverFillRemaining para preencher espaços vazios na tela.

Tag

Mais Posts!

Publicar comentário