|
|
|
|
samples:
|
|
|
|
|
- name: Gallery
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/gallery1.png
|
|
|
|
|
alt: Gallery app screenshot
|
|
|
|
|
- url: images/gallery2.png
|
|
|
|
|
alt: Rally app screenshot
|
|
|
|
|
- url: images/gallery3.png
|
|
|
|
|
alt: Fortnightly app screenshot
|
|
|
|
|
- url: images/gallery4.png
|
|
|
|
|
alt: Crane app screenshot
|
|
|
|
|
- url: images/gallery5.png
|
|
|
|
|
alt: Shrine app screnshot
|
|
|
|
|
source: https://github.com/flutter/gallery
|
|
|
|
|
web: https://gallery.flutter.dev
|
|
|
|
|
description: >
|
|
|
|
|
A collection of material design widgets, behaviors, and vignettes
|
|
|
|
|
implemented with Flutter.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- AlertDialog
|
|
|
|
|
- AppBar
|
|
|
|
|
- BottomAppBar
|
|
|
|
|
- BottomNavigationBar
|
|
|
|
|
- BottomSheet
|
|
|
|
|
- Card
|
|
|
|
|
- Checkbox
|
|
|
|
|
- ChoiceChip
|
|
|
|
|
- CircularProgressIndicator
|
|
|
|
|
- Container
|
|
|
|
|
- CupertinoActivityIndicator
|
|
|
|
|
- CupertinoAlertDialog
|
|
|
|
|
- CupertinoButton
|
|
|
|
|
- CupertinoButton
|
|
|
|
|
- CupertinoDatePicker
|
|
|
|
|
- CupertinoDialogAction
|
|
|
|
|
- CupertinoNavigationBar
|
|
|
|
|
- CupertinoPageScaffold
|
|
|
|
|
- CupertinoSegmentedControl
|
|
|
|
|
- CupertinoSlider
|
|
|
|
|
- CupertinoSlidingSegmentedControl
|
|
|
|
|
- CupertinoSliverRefreshControl
|
|
|
|
|
- CupertinoSwitch
|
|
|
|
|
- CupertinoTabView
|
|
|
|
|
- CupertinoTextField
|
|
|
|
|
- CupertinoTheme
|
|
|
|
|
- DayPicker
|
|
|
|
|
- FilterChip
|
|
|
|
|
- FlatButton
|
|
|
|
|
- FloatingActionButton
|
|
|
|
|
- GridTile
|
|
|
|
|
- GridView
|
|
|
|
|
- Icon
|
|
|
|
|
- InputChip
|
|
|
|
|
- LayoutBuilder
|
|
|
|
|
- LinearProgressIndicator
|
|
|
|
|
- ListTile
|
|
|
|
|
- ListView
|
|
|
|
|
- MaterialBanner
|
|
|
|
|
- MonthPicker
|
|
|
|
|
- PaginatedDataTable
|
|
|
|
|
- PopupMenuButton
|
|
|
|
|
- PopupMenuItem
|
|
|
|
|
- Radio
|
|
|
|
|
- RaisedButton
|
|
|
|
|
- RangeSlider
|
|
|
|
|
- Scaffold
|
|
|
|
|
- SimpleDialog
|
|
|
|
|
- Slider
|
|
|
|
|
- SnackBar
|
|
|
|
|
- Switch
|
|
|
|
|
- TabBar
|
|
|
|
|
- TabBarView
|
|
|
|
|
- TextField
|
|
|
|
|
- TextFormField
|
|
|
|
|
- Tooltip
|
|
|
|
|
- YearPicker
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
- flutter/cupertino
|
|
|
|
|
- google_fonts
|
|
|
|
|
- scoped_model
|
|
|
|
|
tags: ['intermediate', 'sample', 'gallery', 'material', 'design', 'vignettes']
|
|
|
|
|
platforms: ['web', 'ios', 'android']
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Add to App
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/add_to_app1.png
|
|
|
|
|
alt: Add_to_app screenshot
|
|
|
|
|
- url: images/add_to_app2.png
|
|
|
|
|
alt: Add_to_app screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/add_to_app
|
|
|
|
|
description: >
|
|
|
|
|
Android and iOS projects that each import a standalone Flutter module.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets:
|
|
|
|
|
- WidgetsFlutterBinding
|
|
|
|
|
- MethodChannel
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
- flutter/services
|
|
|
|
|
- provider
|
|
|
|
|
tags: ['advanced', 'sample', 'add-to-app', 'android', 'ios', 'native', 'embedding']
|
|
|
|
|
platforms: ['ios', 'android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Animations
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/animations1.png
|
|
|
|
|
alt: Animations sample screenshot
|
|
|
|
|
- url: images/animations2.png
|
|
|
|
|
alt: Animations sample screenshot
|
|
|
|
|
- url: images/animations3.png
|
|
|
|
|
alt: Animations sample screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/animations
|
|
|
|
|
description: >
|
|
|
|
|
Sample apps that showcasing Flutter's animation features.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets:
|
|
|
|
|
- AnimatedContainer
|
|
|
|
|
- PageRouteBuilder
|
|
|
|
|
- AnimationController
|
|
|
|
|
- SingleTickerProviderStateMixin
|
|
|
|
|
- Tween
|
|
|
|
|
- AnimatedBuilder
|
|
|
|
|
- TweenSequence
|
|
|
|
|
- TweenSequenceItem
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
tags: ['intermediate', 'sample', 'animation']
|
|
|
|
|
platforms: ['ios', 'android', 'web']
|
|
|
|
|
type: sample
|
|
|
|
|
web: web/animations
|
|
|
|
|
|
|
|
|
|
- name: Flutter Maps Firestore
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/flutter_maps_firestore1.png
|
|
|
|
|
alt: Flutter maps firestore screenshot
|
|
|
|
|
- url: images/flutter_maps_firestore2.png
|
|
|
|
|
alt: Flutter maps firestore screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/flutter_maps_firestore
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter sample app that shows the end product of the Cloud Next '19 talk
|
|
|
|
|
Build Mobile Apps With Flutter and Google Maps.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets:
|
|
|
|
|
- GoogleMap
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
- cloud_firestore
|
|
|
|
|
- google_maps_flutter
|
|
|
|
|
- google_maps_webservice
|
|
|
|
|
tags: ['intermediate', 'sample', 'firebase', 'maps']
|
|
|
|
|
platforms: ['ios', 'android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Isolate Example
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/isolate1.png
|
|
|
|
|
alt: Isolate example screenshot
|
|
|
|
|
- url: images/isolate2.png
|
|
|
|
|
alt: Isolate example screenshot
|
|
|
|
|
- url: images/isolate3.png
|
|
|
|
|
alt: Isolate example screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/isolate_example
|
|
|
|
|
description: >
|
|
|
|
|
A sample application that demonstrate best practices when using
|
|
|
|
|
isolates.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- FutureBuilder
|
|
|
|
|
- AnimationController
|
|
|
|
|
packages:
|
|
|
|
|
- dart:isolate
|
|
|
|
|
- dart:math
|
|
|
|
|
tags: ['intermediate', 'sample', 'isolates', 'concurrency']
|
|
|
|
|
platforms: ['ios', 'android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: jsonexample
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/jsonexample1.png
|
|
|
|
|
alt: JSON example screenshot
|
|
|
|
|
- url: images/jsonexample2.png
|
|
|
|
|
alt: JSON example screenshot
|
|
|
|
|
- url: images/jsonexample3.png
|
|
|
|
|
alt: JSON example screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/jsonexample
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter sample app that deserializes a set of JSON strings using three
|
|
|
|
|
different libraries: dart:convert, json_serializable, and built_value.
|
|
|
|
|
difficulty: beginner
|
|
|
|
|
widgets:
|
|
|
|
|
- Table
|
|
|
|
|
- TableRow
|
|
|
|
|
packages:
|
|
|
|
|
- json_serializable
|
|
|
|
|
- built_value
|
|
|
|
|
- built_collection
|
|
|
|
|
- json_annotation
|
|
|
|
|
- build_runner
|
|
|
|
|
- built_value_generator
|
|
|
|
|
tags: ['beginner', 'sample']
|
|
|
|
|
platforms: ['ios', 'android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Place Tracker
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/place_tracker1.png
|
|
|
|
|
alt: Place Tracker screenshot
|
|
|
|
|
- url: images/place_tracker2.png
|
|
|
|
|
alt: Place Tracker screenshot
|
|
|
|
|
- url: images/place_tracker3.png
|
|
|
|
|
alt: Place Tracker screenshot
|
|
|
|
|
- url: images/place_tracker4.png
|
|
|
|
|
alt: Place Tracker screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/place_tracker
|
|
|
|
|
description: >
|
|
|
|
|
A sample place tracking app that uses the google_maps_flutter plugin. Keep
|
|
|
|
|
track of your favorite places, places you've visited, and places you want
|
|
|
|
|
to go. View details about these places, show them on a map, and get
|
|
|
|
|
directions to them.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- GoogleMap
|
|
|
|
|
packages:
|
|
|
|
|
- google_maps_flutter
|
|
|
|
|
tags: ['intermediate', 'sample', 'json', 'serialization']
|
|
|
|
|
platforms: ['android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Platform Design
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/platform_design1.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design2.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design3.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design4.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design5.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design6.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
- url: images/platform_design7.png
|
|
|
|
|
alt: Platform Design screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/platform_design
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter app that maximizes application code reuse while adhering to
|
|
|
|
|
different design patterns on Android and iOS
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets:
|
|
|
|
|
- TargetPlatform
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
- flutter/cupertino
|
|
|
|
|
tags: ['advanced', 'sample', 'ios']
|
|
|
|
|
platforms: ['ios', 'android']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Platform View Swift
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/platform_view_swift1.png
|
|
|
|
|
alt: Platform View Swift screenshot
|
|
|
|
|
- url: images/platform_view_swift2.png
|
|
|
|
|
alt: Platform View Swift screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/platform_design
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter sample app that combines a native iOS UIViewController with a
|
|
|
|
|
full-screen Flutter view.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- MethodChannel
|
|
|
|
|
packages:
|
|
|
|
|
- flutter/material
|
|
|
|
|
- flutter/services
|
|
|
|
|
tags: ['advanced', 'sample', 'ios']
|
|
|
|
|
platforms: ['ios']
|
|
|
|
|
type: sample
|
|
|
|
|
|
|
|
|
|
- name: Provider Shopper
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/provider_shopper1.png
|
|
|
|
|
alt: Provider Shopper screenshot
|
|
|
|
|
- url: images/provider_shopper2.png
|
|
|
|
|
alt: Provider Shopper screenshot
|
|
|
|
|
- url: images/provider_shopper3.png
|
|
|
|
|
alt: Provider Shopper screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/provider_shopper
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter sample app that shows a state management approach using the Provider package.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- Provider
|
|
|
|
|
- MultiProvider
|
|
|
|
|
- ChangeNotifier
|
|
|
|
|
packages:
|
|
|
|
|
- provider
|
|
|
|
|
tags: ['intermediate', 'sample', 'provider']
|
|
|
|
|
platforms: ['ios', 'android', 'web']
|
|
|
|
|
type: sample
|
|
|
|
|
web: web/provider_shopper
|
|
|
|
|
|
|
|
|
|
- name: Web Dashboard
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/web_dashboard1.png
|
|
|
|
|
alt: Web Dashboard screenshot
|
|
|
|
|
- url: images/web_dashboard2.png
|
|
|
|
|
alt: Web Dashbaord screenshot
|
|
|
|
|
- url: images/web_dashboard3.png
|
|
|
|
|
alt: Web Dashboard screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/experimental/web_dashboard
|
|
|
|
|
description: >
|
|
|
|
|
A dashboard app that displays daily entries. Demonstrates AdaptiveScaffold and NavigationRail. Showcases how to
|
|
|
|
|
use Firebase, but uses a mock backend by default.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets:
|
|
|
|
|
- AdaptiveScaffold
|
|
|
|
|
- NavigationRail
|
|
|
|
|
- FutureBuilder
|
|
|
|
|
- StreamBuilder
|
|
|
|
|
packages:
|
|
|
|
|
- firebase
|
|
|
|
|
tags: ['intermediate', 'sample', 'firebase']
|
|
|
|
|
platforms: ['ios', 'android', 'web']
|
|
|
|
|
type: sample
|
|
|
|
|
web: web/web_dashboard
|
|
|
|
|
|
|
|
|
|
- name: Form App
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/form_app1.png
|
|
|
|
|
alt: Form App screenshot
|
|
|
|
|
- url: images/form_app2.png
|
|
|
|
|
alt: Form App screenshot
|
|
|
|
|
- url: images/form_app3.png
|
|
|
|
|
alt: Form App screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/experimental/form_app
|
|
|
|
|
description: >
|
|
|
|
|
A Flutter sample app that shows how to use Forms.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets:
|
|
|
|
|
- Form
|
|
|
|
|
packages: []
|
|
|
|
|
tags: ['intermediate', 'sample', 'forms']
|
|
|
|
|
platforms: ['ios', 'android', 'web']
|
|
|
|
|
type: sample
|
|
|
|
|
web: web/form_app
|
|
|
|
|
###################
|
|
|
|
|
#### Web Demos ####
|
|
|
|
|
###################
|
|
|
|
|
|
|
|
|
|
- name: Charts
|
|
|
|
|
author: Flutter
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/charts1.png
|
|
|
|
|
source: https://github.com/google/charts
|
|
|
|
|
description: >
|
|
|
|
|
A general-purpose charting library.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['ios', 'android', 'web']
|
|
|
|
|
tags: ['demo', 'charts']
|
|
|
|
|
web: web/charts
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Filipino Cuisine
|
|
|
|
|
author: github.com/markgrancapal
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/filipino_cuisine1.png
|
|
|
|
|
alt: Filipino Cuisine screenshot
|
|
|
|
|
source: https://github.com/markgrancapal/filipino_cuisine
|
|
|
|
|
description: >
|
|
|
|
|
Flutter Create challenge entry
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'flutter create']
|
|
|
|
|
web: web/filipino_cuisine
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: GitHub Dataviz
|
|
|
|
|
author: Larva Labs
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/github_dataviz1.png
|
|
|
|
|
alt: GitHub Dataviz screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/web/github_dataviz
|
|
|
|
|
description: >
|
|
|
|
|
A visualization for Flutter repository data
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'data', 'visualization']
|
|
|
|
|
web: web/github_dataviz
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Particle Background
|
|
|
|
|
author: Felix Blaschke
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/particle_background1.png
|
|
|
|
|
alt: Particle Background screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/web/particle_background
|
|
|
|
|
description: >
|
|
|
|
|
Flutter app demonstrating package:simple_animations in action.
|
|
|
|
|
difficulty: intermediate
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'animation']
|
|
|
|
|
web: web/particle_background
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Slide Puzzle
|
|
|
|
|
author: Kevin Moore
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/slide_puzzle1.png
|
|
|
|
|
alt: Slide Puzzle screenshot
|
|
|
|
|
source: https://github.com/kevmoo/slide_puzzle
|
|
|
|
|
description: >
|
|
|
|
|
A slide (15) puzzle implemented in Dart and Flutter.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'game']
|
|
|
|
|
web: web/slide_puzzle
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Timeflow
|
|
|
|
|
author: Fabian Stein
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/timeflow1.png
|
|
|
|
|
alt: Timeflow screenshot
|
|
|
|
|
source: https://github.com/Fabian-Stein/timeflow
|
|
|
|
|
description: >
|
|
|
|
|
A gentle animation that provides a calming experience to stressed developers.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'animation']
|
|
|
|
|
web: web/timeflow
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Vision Challenge
|
|
|
|
|
author: Yukkei Choi
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/vision_challenge1.png
|
|
|
|
|
alt: Vision Challenge screenshot
|
|
|
|
|
- url: images/vision_challenge2.png
|
|
|
|
|
alt: Vision Challenge screenshot
|
|
|
|
|
source: https://github.com/flutter/samples/tree/master/web/vision_challenge
|
|
|
|
|
description: >
|
|
|
|
|
A fun game to test your color perception abilities.
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'game']
|
|
|
|
|
web: web/vision_challenge
|
|
|
|
|
type: demo
|
|
|
|
|
|
|
|
|
|
- name: Dice
|
|
|
|
|
author: Jaime Blasco
|
|
|
|
|
screenshots:
|
|
|
|
|
- url: images/dice.png
|
|
|
|
|
alt: Dice screenshot
|
|
|
|
|
source: https://github.com/jamesblasco/zflutter/blob/master/zflutter/example/lib/examples/dice/dice.dart
|
|
|
|
|
description: >
|
|
|
|
|
A demo of 3d animation using dice
|
|
|
|
|
difficulty: advanced
|
|
|
|
|
widgets: []
|
|
|
|
|
packages: []
|
|
|
|
|
platforms: ['web']
|
|
|
|
|
tags: ['demo', 'animation']
|
|
|
|
|
web: https://z.flutter.gallery/#/dice
|
|
|
|
|
type: demo
|
