Skip to content
New in v1.3.0See what's new

Learn Flutterby example.

FlutterGuide is a free, open-source Android app with 216+ runnable samples: widgets, packages, functions and full screens, each with a live preview and the code behind it.

  • Free & open source
  • No sign-up
  • English, Português, Español
FlutterGuide's home screen, listing component groups like Text, Button, Form and Layout
The source code of the ActionChip sample, with line numbers

Features

Why FlutterGuide?

Everything you need to go from reading about a widget to using it: no setup, no boilerplate, no guessing.

  • Live previews

    Every sample runs inside the app. Tap, scroll and type to see how it really behaves.

  • Copy-ready code

    The full, runnable source sits one tab away from its preview.

  • Organized by topic

    Browse by group (text, forms, layout, navigation) or search by name.

  • Favorites

    Save the samples you keep coming back to and find them in one tap.

  • Your code theme

    Pick the syntax theme you read best, in light or dark mode.

  • Three languages

    The whole app in English, Portuguese and Spanish.

Learn by doing

Real examples, real code.

Open any sample and flip between what it does and how it's written. Understand it, copy it, and use it in your own project.

  • A working preview, not a screenshot
  • Complete source, ready to paste into main.dart
  • A link to the official docs for every widget
Browse the catalog
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',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The catalog

The whole toolkit, in one place.

From a single Text widget to a complete chat screen, everything is grouped the way you'd look for it.

216samples and counting
143

Widgets

Material and Cupertino, grouped by what they do.

  • Text
  • Button
  • Form
  • Picker
  • List
  • Layout
  • Navigation
  • Dialog & Overlay
  • Display
  • Effects
  • Interaction
  • Builder
46

Packages

Popular pub.dev packages, like dio, shimmer and flutter_svg, running live.

13

Functions

Dialogs, menus, pickers and other core functions.

9

Elements

Reusable interface pieces for common patterns.

5

UI samples

Complete screens: login, chat, an email client and more.

46 pub.dev packages, each running live in the 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

Inside the app

Every screen, made to learn.

A clean interface that stays out of the way, so the code gets your full attention.

  • 01Home, with every component group

  • 02Elements catalog

  • 03UI samples catalog

  • 04The widget catalog, with search and favorites

  • 05A widget's live preview

  • 06The same widget's source code

  • 07Packages catalog

  • 08Settings

  • 09Code theme selector

Deep links

Every sample has a link.

Found something worth showing a teammate? Share it, and the link opens that exact sample in their app.

  1. Open a sample

    Any widget, package, function, element or UI.

  2. Tap Share

    You get a direct link to that exact sample.

  3. They land right on it

    No searching: the app opens straight to the sample.

The ActionChip sample open in the app, reached from a shared link

Shared link

flutterguide.app/widgets/ActionChip

Opens in FlutterGuide

Open source

Built in the open, tested like a product.

The whole app is on GitHub under the MIT license. Read how it's made, open an issue, or send the sample you wish existed.

Line coverage
97.8%
Test cases
378
License
MIT

Built with Flutter, Riverpod and go_router

Contribute a sample

Widgets, packages, UI ideas and fixes are all welcome. The contributing guide walks you through setup and the quality gate.

How it's built

  • CI on every change

    Formatting, static analysis, tests and coverage run on each pull request.

  • Strict lints

    The code is held to the very_good_analysis rule set.

  • Coverage gates

    The build fails below 95% line coverage, 98% for the design system.

  • Documented releases

    Every version is logged in a public changelog.

What's new

Always getting better.

The latest releases, straight from the app's changelog.

Full changelog
  1. v1.3.0

    Latest
    • AddedSpanish localization, alongside existing Portuguese (BR) and English
    • AddedSemantic labels for interactive elements (accessibility)
    • AddedProvider to disable ad banners
    +13 more changes
  2. v1.2.3

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

    • AddedRedesigned dialog components (new dialog, line, and button widgets), replacing the old dialog implementation
    • AddedLocalization for the "open URL" error dialog
    • AddedAccepted URL prefixes for Android deep links
    +3 more changes

FAQ

Questions, answered.

Can't find what you're looking for? Open an issue on GitHub.

Ask on GitHub

Get started

Ready to learn by example?

Download FlutterGuide for free and carry 216+ runnable samples in your pocket.

  • Free, with no premium tier
  • No account or sign-up
  • In English, Portuguese and Spanish
Download on Google Play