Pular para o conteúdo
Novo na v1.3.0Ver novidades

Aprenda Flutterna prática.

O FlutterGuide é um app Android gratuito e de código aberto com mais de 216 exemplos executáveis: widgets, pacotes, funções e telas completas, cada um com prévia ao vivo e o código por trás.

  • Gratuito e open source
  • Sem cadastro
  • English, Português, Español
Tela inicial do FlutterGuide, listando grupos de componentes como Texto, Botão, Formulário e Layout
O código-fonte do exemplo de ActionChip, com numeração de linhas

Recursos

Por que o FlutterGuide?

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.

  • Prévias ao vivo

    Cada exemplo roda dentro do app. Toque, role e digite para ver como ele se comporta de verdade.

  • Código pronto para copiar

    O código completo e executável fica a uma aba de distância da prévia.

  • Organizado por tema

    Navegue por grupo (texto, formulários, layout, navegação) ou busque pelo nome.

  • Favoritos

    Salve os exemplos que você sempre consulta e encontre-os com um toque.

  • Seu tema de código

    Escolha o tema de sintaxe que você lê melhor, no modo claro ou escuro.

  • Três idiomas

    O app inteiro em inglês, português e espanhol.

Aprenda fazendo

Exemplos reais, código real.

Abra qualquer exemplo e alterne entre o que ele faz e como ele foi escrito. Entenda, copie e use no seu próprio projeto.

  • Uma prévia funcionando, não uma captura de tela
  • Código completo, pronto para colar no main.dart
  • Um link para a documentação oficial de cada widget
Explorar o catálogo
actionchip_sample.dart
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

Todo o kit, num só lugar.

De um simples widget Text a uma tela de chat completa, tudo agrupado do jeito que você procuraria.

216exemplos e contando
143

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
46

Pacotes

Pacotes populares do pub.dev, como dio, shimmer e flutter_svg, rodando ao vivo.

13

Funções

Diálogos, menus, seletores e outras funções essenciais.

9

Elementos

Peças de interface reutilizáveis para padrões comuns.

5

Telas de exemplo

Telas completas: login, chat, cliente de e-mail e mais.

46 pacotes do pub.dev, cada um rodando ao vivo no app

  • awesome_snackbar_content
  • battery_plus
  • bottom_navy_bar
  • cached_network_image
  • carousel_slider
  • circular_countdown_timer
  • device_info_plus
  • dio
  • dotted_border
  • expandable
  • fl_chart
  • flutter_animate
  • flutter_card_swiper
  • flutter_chat_bubble
  • flutter_rating_bar
  • flutter_slidable
  • flutter_spinkit
  • flutter_staggered_grid_view
  • flutter_svg
  • flutter_syntax_highlighter
  • font_awesome_flutter
  • glass
  • google_fonts
  • google_mobile_ads
  • grouped_list
  • http
  • infinite_scroll_pagination
  • like_button
  • loading_animation_widget
  • loading_indicator
  • msh_checkbox
  • network_info_plus
  • photo_view
  • pinput
  • salomon_bottom_bar
  • scroll_infinity
  • shared_preferences
  • share_plus
  • shimmer
  • side_sheet
  • smooth_page_indicator
  • table_calendar
  • toastification
  • url_launcher
  • uuid
  • video_player

Por dentro do app

Cada tela, feita para ensinar.

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

Links diretos

Todo exemplo tem um link.

Achou algo que vale mostrar para alguém do time? Compartilhe, e o link abre exatamente aquele exemplo no app da pessoa.

  1. Abra um exemplo

    Qualquer widget, pacote, função, elemento ou tela.

  2. Toque em Compartilhar

    Você recebe um link direto para aquele exemplo.

  3. Abre direto nele

    Sem procurar: o app abre exatamente no exemplo.

O exemplo de ActionChip aberto no app, a partir de um link compartilhado

Link compartilhado

flutterguide.app/widgets/ActionChip

Abre no FlutterGuide

Código aberto

Feito às claras, testado como produto.

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.

Cobertura de linhas
97.8%
Casos de teste
378
Licença
MIT

Feito com Flutter, Riverpod e go_router

Contribua com um exemplo

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.

Como é construído

  • 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

Sempre evoluindo.

As versões mais recentes, direto do changelog do app.

Changelog completo

As notas de versão são publicadas em inglês, como no repositório do app.

  1. v1.3.0

    Mais recente
    • AdicionadoSpanish localization, alongside existing Portuguese (BR) and English
    • AdicionadoSemantic labels for interactive elements (accessibility)
    • AdicionadoProvider to disable ad banners
    +13 alterações
  2. v1.2.3

    • AlteradoRemoved the donation dialog and the Expanded wrapper from the dialog button widget
    • AlteradoStandardized app links
    • CorrigidoTheme not applying correctly after opening the app from a deep link
  3. v1.2.2

    • AdicionadoRedesigned dialog components (new dialog, line, and button widgets), replacing the old dialog implementation
    • AdicionadoLocalization for the "open URL" error dialog
    • AdicionadoAccepted URL prefixes for Android deep links
    +3 alterações

FAQ

Perguntas respondidas.

Não encontrou o que procurava? Abra uma issue no GitHub.

Perguntar no GitHub

Comece agora

Pronto para aprender na prática?

Baixe o FlutterGuide gratuitamente e leve mais de 216 exemplos executáveis no bolso.

  • Gratuito, sem plano pago
  • Sem conta nem cadastro
  • Em inglês, português e espanhol
Baixar no Google Play