|
|
|
|
# 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) [](https://github.com/nisrulz/flutter-examples) [](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) [](https://github.com/iampawan/FlutterExampleApps) [](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) [](https://github.com/mjohnsullivan/flutter-by-example) [](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.
|
|
|
|
|
|
|
|
|
|
#### [Flutter for web samples](web) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
A collection of Flutter samples structured as Flutter for web projects. You
|
|
|
|
|
can see them in action at https://flutter.github.io/samples.
|
|
|
|
|
|
|
|
|
|
## Architecture / networking / backend
|
|
|
|
|
|
|
|
|
|
#### [Flutter Architectural Samples](https://github.com/brianegan/flutter_architecture_samples) [](https://github.com/brianegan/flutter_architecture_samples) [](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`.
|
|
|
|
|
|
|
|
|
|
#### [provider_counter](provider_counter) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
The simplest possible app (the counter) using `provider`
|
|
|
|
|
for state management. This was previously known as `scoped_model_counter`,
|
|
|
|
|
and used `scoped_model` for state management.
|
|
|
|
|
|
|
|
|
|
#### [provider_shopper](provider_shopper) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
A slightly more complex example of state management with `provider`.
|
|
|
|
|
This example demonstrates multiple `providers`, navigation between screens,
|
|
|
|
|
and some other advanced topics.
|
|
|
|
|
|
|
|
|
|
## 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) [](https://github.com/iampawan/Flutter-UI-Kit) [](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) [](https://github.com/ibhavikmakwana/FlutterPlayground) [](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.
|
|
|
|
|
|
|
|
|
|
#### [Platform Design](platform_design) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
An app designed to look great on both iOS and Android, this sample
|
|
|
|
|
shows how to add platform-specific design touches to an app
|
|
|
|
|
while reusing as much code as possible.
|
|
|
|
|
|
|
|
|
|
#### [Animation examples](animations) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
_currently in development_
|
|
|
|
|
|
|
|
|
|
A collection of animation examples. The app starts with basic concepts like
|
|
|
|
|
`AnimationController` and `Tween`, then progresses to transitions and
|
|
|
|
|
advanced demos.
|
|
|
|
|
|
|
|
|
|
## Maps
|
|
|
|
|
|
|
|
|
|
#### [Place tracker](place_tracker) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
A simple integration of the Google Maps plugin for Flutter, this app
|
|
|
|
|
shows how to add a map to the Flutter widget hierarchy, create markers,
|
|
|
|
|
and more.
|
|
|
|
|
|
|
|
|
|
#### [Flutter, maps, and Cloud Firestore](flutter_maps_firestore) _(Flutter team)_
|
|
|
|
|
|
|
|
|
|
This app shows the use of a Google map with data loaded from Cloud Firestore.
|
|
|
|
|
It was [built live on stage](https://www.youtube.com/watch?v=RpQLFAFqMlw) at
|
|
|
|
|
Cloud Next '19.
|
|
|
|
|
|
|
|
|
|
## 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) [](https://github.com/roughike/inKino) [](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) [](https://github.com/redbrogdon/flutterflip) [](https://github.com/redbrogdon/flutterflip/fork)
|
|
|
|
|
A simple reversi clone built with Flutter. It showcases some implicit animations,
|
|
|
|
|
a stream-based, reactive architecture, and a technique to move work off the UI
|
|
|
|
|
thread and into an isolate.
|
|
|
|
|
|
|
|
|
|
## Demos
|
|
|
|
|
|
|
|
|
|
#### [Shrine](gallery/gallery/lib/studies/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](gallery) _(Flutter team)_
|
|
|
|
|
The official Flutter Gallery. There's tons of stuff in here. Just tons.
|
