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ívelSliverList– Lista otimizada para rolagemSliverGrid– Grelha (grid) flexívelSliverPersistentHeader– 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
SliverListem vez deListViewdentro deCustomScrollViewpara melhor desempenho. - Combine Slivers para criar layouts responsivos e dinâmicos.
- Utilize
SliverFillRemainingpara preencher espaços vazios na tela.
Publicar comentário