Widgets
Material e Cupertino, agrupados pelo que fazem.
- Texto
- Botão
- Formulário
- Seletor
- Lista
- Layout
- Navegação
- Diálogo e sobreposição
- Exibição
- Efeitos
- Interação
- Builder
Recursos
Tudo o que você precisa para sair da leitura sobre um widget e usá-lo de verdade: sem configuração, sem boilerplate, sem adivinhação.
Cada exemplo roda dentro do app. Toque, role e digite para ver como ele se comporta de verdade.
O código completo e executável fica a uma aba de distância da prévia.
Navegue por grupo (texto, formulários, layout, navegação) ou busque pelo nome.
Salve os exemplos que você sempre consulta e encontre-os com um toque.
Escolha o tema de sintaxe que você lê melhor, no modo claro ou escuro.
O app inteiro em inglês, português e espanhol.
Aprenda fazendo
Abra qualquer exemplo e alterne entre o que ele faz e como ele foi escrito. Entenda, copie e use no seu próprio projeto.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: ActionChipSample(),
),
);
}
/// Sample demonstrating `ActionChipSample`.
class ActionChipSample extends StatefulWidget {
/// Creates a [ActionChipSample].
const ActionChipSample({super.key});
@override
State<ActionChipSample> createState() => _ActionChipSampleState();
}
class _ActionChipSampleState extends State<ActionChipSample> {
bool _isFavorite = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ActionChip(
onPressed: () {
setState(() {
_isFavorite = !_isFavorite;
});
},
avatar: Icon(
_isFavorite ? Icons.favorite : Icons.favorite_border,
),
label: Text(
_isFavorite ? 'Favorited' : 'Favorite',
),
),
const SizedBox(width: 12),
ActionChip(
avatar: Icon(
_isFavorite ? Icons.favorite : Icons.favorite_border,
),
label: Text(
_isFavorite ? 'Favorited' : 'Favorite',
),
),
],
),
),
);
}
}O catálogo
De um simples widget Text a uma tela de chat completa, tudo agrupado do jeito que você procuraria.
Material e Cupertino, agrupados pelo que fazem.
Pacotes populares do pub.dev, como dio, shimmer e flutter_svg, rodando ao vivo.
Diálogos, menus, seletores e outras funções essenciais.
Peças de interface reutilizáveis para padrões comuns.
Telas completas: login, chat, cliente de e-mail e mais.
46 pacotes do pub.dev, cada um rodando ao vivo no app
Por dentro do app
Uma interface limpa que não atrapalha, para o código ter toda a sua atenção.
01Início, com todos os grupos de componentes
02Catálogo de elementos
03Catálogo de telas de exemplo
04O catálogo de widgets, com busca e favoritos
05A prévia ao vivo de um widget
06O código-fonte do mesmo widget
07Catálogo de pacotes
08Configurações
09Seletor de tema de código
Código aberto
O app inteiro está no GitHub sob a licença MIT. Veja como ele é feito, abra uma issue ou envie o exemplo que você gostaria que existisse.
Feito com Flutter, Riverpod e go_router
Widgets, pacotes, ideias de interface e correções são bem-vindos. O guia de contribuição mostra a configuração e o controle de qualidade.
CI em cada mudança
Formatação, análise estática, testes e cobertura rodam em cada pull request.
Lints rigorosos
O código segue o conjunto de regras very_good_analysis.
Metas de cobertura
O build falha abaixo de 95% de cobertura de linhas, 98% no design system.
Versões documentadas
Cada versão fica registrada em um changelog público.
Novidades
As versões mais recentes, direto do changelog do app.
As notas de versão são publicadas em inglês, como no repositório do app.
Expanded wrapper from the dialog button widgetFAQ
Não encontrou o que procurava? Abra uma issue no GitHub.
Comece agora
Baixe o FlutterGuide gratuitamente e leve mais de 216 exemplos executáveis no bolso.