|
|
|
# A curated list of samples
|
|
|
|
|
|
|
|
Contained in this list are sample apps, demos, and examples that can help you
|
|
|
|
grow your Flutter skills. Some are maintained here by the Flutter team,
|
|
|
|
but many have been created by the Flutter community and are kept in other repos
|
|
|
|
in and out of GitHub.
|
|
|
|
|
|
|
|
This is not an exhaustive list of samples, and just because a project
|
|
|
|
isn't listed here doesn't mean that it's not worth exploring. Similarly, while
|
|
|
|
the Flutter team works to keep this list up to date, there are plenty of others
|
|
|
|
created by the community, such as
|
|
|
|
[Awesome Flutter](https://github.com/Solido/awesome-flutter) from @Solido.
|
|
|
|
|
|
|
|
***Please don't submit pull requests directly updating this file. While we're
|
|
|
|
always happy to learn of new samples from the community, we need
|
|
|
|
to keep this file small. There are plenty of user-maintained indices (like
|
|
|
|
[Awesome Flutter](https://github.com/Solido/awesome-flutter)) that are meant to
|
|
|
|
be exhaustive, and those are great places for submitting your own work.***
|
|
|
|
|
|
|
|
## How-to Collections
|
|
|
|
|
|
|
|
#### [Flutter Examples](https://github.com/nisrulz/flutter-examples) [![GitHub stars](https://img.shields.io/github/stars/nisrulz/flutter-examples.svg?style=social&label=Star)](https://github.com/nisrulz/flutter-examples) [![GitHub forks](https://img.shields.io/github/forks/nisrulz/flutter-examples.svg?style=social&label=Fork)](https://github.com/nisrulz/flutter-examples/fork)
|
|
|
|
|
|
|
|
A collection of single-topic examples from Nishant Srivastava. These include
|
|
|
|
everything from gradients to JSON to routing and more.
|
|
|
|
|
|
|
|
#### [Flutter Example Apps](https://github.com/iampawan/FlutterExampleApps) [![GitHub stars](https://img.shields.io/github/stars/iampawan/FlutterExampleApps.svg?style=social&label=Star)](https://github.com/iampawan/FlutterExampleApps) [![GitHub forks](https://img.shields.io/github/forks/iampawan/FlutterExampleApps.svg?style=social&label=Fork)](https://github.com/iampawan/FlutterExampleApps/fork)
|
|
|
|
|
|
|
|
Several dozen examples from Flutter GDE Pawan Kumar. These cover state
|
|
|
|
management, Firebase, UI design, and many other topics. Each one comes with a
|
|
|
|
YouTube video showing implementation.
|
|
|
|
|
|
|
|
#### [Flutter by Example](https://github.com/mjohnsullivan/flutter-by-example) [![GitHub stars](https://img.shields.io/github/stars/mjohnsullivan/flutter-by-example.svg?style=social&label=Star)](https://github.com/mjohnsullivan/flutter-by-example) [![GitHub forks](https://img.shields.io/github/forks/mjohnsullivan/flutter-by-example.svg?style=social&label=Fork)](https://github.com/mjohnsullivan/flutter-by-example/fork)
|
|
|
|
|
|
|
|
Twenty-odd samples detailing common tasks with Flutter: how to use text fields,
|
|
|
|
streams and StreamBuilders, and more.
|
|
|
|
|
|
|
|
## Architecture / networking / backend
|
|
|
|
|
|
|
|
#### [Flutter Architectural Samples](https://github.com/brianegan/flutter_architecture_samples) [![GitHub stars](https://img.shields.io/github/stars/brianegan/flutter_architecture_samples.svg?style=social&label=Star)](https://github.com/brianegan/flutter_architecture_samples) [![GitHub forks](https://img.shields.io/github/forks/brianegan/flutter_architecture_samples.svg?style=social&label=Fork)](https://github.com/brianegan/flutter_architecture_samples/fork)
|
|
|
|
|
|
|
|
Brian Egan's implementations of TodoMVC using a variety of state management and
|
|
|
|
architectural approaches. If you'd like to see how an app built with
|
|
|
|
`flutter-redux` is different from one using BLoC, this is a great place to
|
|
|
|
start.
|
|
|
|
|
|
|
|
#### [jsonexample](jsonexample) _(Flutter team)_
|
|
|
|
|
|
|
|
A simple app showing three different approaches to deserializing JSON:
|
|
|
|
hand-written constructors, `json_serializable`, and `built_value`.
|
|
|
|
|
|
|
|
#### [scoped_model_counter](scoped_model_counter) _(Flutter team)_
|
|
|
|
|
|
|
|
The simplest possible app (the counter) using `scoped_model`
|
|
|
|
for state management.
|
|
|
|
|
|
|
|
## UI
|
|
|
|
|
|
|
|
#### [Veggie Seasons](veggieseasons) _(Flutter team)_
|
|
|
|
|
|
|
|
[Available on the App Store!](https://itunes.apple.com/is/app/veggie-seasons/id1450855435)
|
|
|
|
|
|
|
|
Veggie Seasons is a published iOS app that displays seasonality, vitamin
|
|
|
|
content, and trivia for a bunch of different fruits and veggies. If you're
|
|
|
|
interested in learning how to use Flutter's
|
|
|
|
[Cupertino](https://flutter.dev/docs/development/ui/widgets/cupertino) package
|
|
|
|
to build interfaces for iOS, it's a great place to start.
|
|
|
|
|
|
|
|
#### [Flutter UI Kit](https://github.com/iampawan/Flutter-UI-Kit) [![GitHub stars](https://img.shields.io/github/stars/iampawan/Flutter-UI-Kit.svg?style=social&label=Star)](https://github.com/iampawan/Flutter-UI-Kit) [![GitHub forks](https://img.shields.io/github/forks/iampawan/Flutter-UI-Kit.svg?style=social&label=Fork)](https://github.com/iampawan/Flutter-UI-Kit/fork)
|
|
|
|
Another sample from Flutter GDE Pawan Kumar, this repo includes a variety of
|
|
|
|
polished UI examples.
|
|
|
|
|
|
|
|
#### [FlutterPlayground](https://github.com/ibhavikmakwana/FlutterPlayground) [![GitHub stars](https://img.shields.io/github/stars/ibhavikmakwana/FlutterPlayground.svg?style=social&label=Star)](https://github.com/ibhavikmakwana/FlutterPlayground) [![GitHub forks](https://img.shields.io/github/forks/ibhavikmakwana/FlutterPlayground.svg?style=social&label=Fork)](https://github.com/ibhavikmakwana/FlutterPlayground/fork)
|
|
|
|
|
|
|
|
A repo full of short, specific examples (with animated screenshots!) showing
|
|
|
|
commonly used widgets and how to put them to work.
|
|
|
|
|
|
|
|
#### [Flutter Challenges](https://github.com/matthew-carroll?tab=repositories&q=flutter_ui_challenge)
|
|
|
|
More a GitHub search result than a single repo, Matt Carroll's Flutter UI
|
|
|
|
challenges showcase some amazing designs powered by Flutter. Make sure to check
|
|
|
|
the accompanying YouTube video so you can watch Matt implement them.
|
|
|
|
|
|
|
|
## Full apps
|
|
|
|
|
|
|
|
#### [It's All Widgets!](https://itsallwidgets.com?open_source=true)
|
|
|
|
Created and maintained by the Flutter community, *It's All Widgets* collects
|
|
|
|
links to apps built with Flutter. Many are open source and include links to
|
|
|
|
their source code, so you can browse through the list until you find something
|
|
|
|
that looks interesting, and then go see how it was built.
|
|
|
|
|
|
|
|
#### [inKino](https://github.com/roughike/inKino) [![GitHub stars](https://img.shields.io/github/stars/roughike/inKino.svg?style=social&label=Star)](https://github.com/roughike/inKino) [![GitHub forks](https://img.shields.io/github/forks/roughike/inKino.svg?style=social&label=Fork)](https://github.com/roughike/inKino/fork)
|
|
|
|
An unofficial Finnkino client that shows movies and showtimes of Finnkino
|
|
|
|
cinemas in Finland. It uses Redux, has a comprehensive set of tests, and shares
|
|
|
|
40% of its code between the Flutter app and the AngularDart web app.
|
|
|
|
It's currently available in the
|
|
|
|
[App Store](https://itunes.apple.com/gb/app/inkino/id1367181450?mt=8),
|
|
|
|
[Play Store](https://play.google.com/store/apps/details?id=com.roughike.inkino)
|
|
|
|
and as a [Progressive Web App](https://inkino.app).
|
|
|
|
|
|
|
|
#### [FlutterFlip](https://github.com/redbrogdon/flutterflip) [![GitHub stars](https://img.shields.io/github/stars/redbrogdon/flutterflip.svg?style=social&label=Star)](https://github.com/redbrogdon/flutterflip) [![GitHub forks](https://img.shields.io/github/forks/redbrogdon/flutterflip.svg?style=social&label=Fork)](https://github.com/redbrogdon/flutterflip/fork)
|
|
|
|
A simple reversi clone built with Flutter. It showcases some implicit animations
|
|
|
|
and how to move work off the UI thread into an isolate.
|
|
|
|
|
|
|
|
#### [WhatTodo](https://github.com/burhanrashid52/WhatTodo) [![GitHub stars](https://img.shields.io/github/stars/burhanrashid52/WhatTodo.svg?style=social&label=Star)](https://github.com/burhanrashid52/WhatTodo) [![GitHub forks](https://img.shields.io/github/forks/burhanrashid52/WhatTodo.svg?style=social&label=Fork)](https://github.com/burhanrashid52/WhatTodo/fork)
|
|
|
|
A simple todo app that tracks daily tasks, built using the BLoC Pattern. You can
|
|
|
|
add projects, labels, and due dates to your tasks, and sort them using the same
|
|
|
|
criteria.
|
|
|
|
|
|
|
|
## Demos
|
|
|
|
|
|
|
|
#### [Shrine](shrine) _(Flutter team)_
|
|
|
|
The Shrine demo app from the Flutter team. It's designed to showcase how apps
|
|
|
|
can put their own spin on the Material Design components and how to use
|
|
|
|
ScopedModel to maintain app state across screens.
|
|
|
|
|
|
|
|
#### [Flutter Gallery](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery) _(Flutter team)_
|
|
|
|
The official Flutter Gallery. There's tons of stuff in here. Just tons.
|