mirror of https://github.com/flutter/samples.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
669 lines
20 KiB
669 lines
20 KiB
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 & Cupertino 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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/platform_view_swift
|
|
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']
|
|
links: []
|
|
type: sample
|
|
|
|
- name: Infinite List
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/infinite_list.png
|
|
alt: Infinite List screenshot
|
|
source: https://github.com/flutter/samples/tree/main/infinite_list
|
|
description: >
|
|
A Flutter sample app that shows an implementation of the "infinite list" UX pattern.
|
|
That is, a list is shown to the user as if it was continuous although it is internally
|
|
paginated. This is a common feature of mobile apps, from shopping catalogs
|
|
through search engines to social media clients.
|
|
difficulty: intermediate
|
|
widgets:
|
|
- Selector
|
|
- AppBar
|
|
- ListTile
|
|
- ListView
|
|
packages:
|
|
- provider
|
|
- meta
|
|
tags: ['sample', 'material', 'design', 'android', 'ios']
|
|
platforms: ['ios', 'android']
|
|
links: []
|
|
type: sample
|
|
|
|
- name: IOS App Clip
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/ios_app_clip.png
|
|
alt: IOS App Clip screenshot
|
|
source: https://github.com/flutter/samples/tree/main/ios_app_clip
|
|
description: >
|
|
A Flutter sample app that shows the demonstrating integration with iOS 14's App Clip,
|
|
the App Clip target is rendered by Flutter and uses a plugin.
|
|
difficulty: intermediate
|
|
widgets:
|
|
- CupertinoApp
|
|
- AppBar
|
|
- FlutterLogo
|
|
packages:
|
|
- device_info
|
|
tags: ['sample', 'Device Info', 'ios']
|
|
platforms: ['ios']
|
|
links: []
|
|
type: sample
|
|
|
|
- name: Testing App
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/testing_app1.png
|
|
alt: Testing App screenshot
|
|
- url: images/testing_app2.png
|
|
alt: Testing App screenshot
|
|
source: https://github.com/flutter/samples/tree/main/testing_app
|
|
description: >
|
|
A Flutter sample app that shows different types of testing in Flutter.
|
|
difficulty: intermediate
|
|
widgets:
|
|
- AppBar
|
|
- ListTile
|
|
- ListView
|
|
- Snackbar
|
|
packages:
|
|
- provider
|
|
tags: ['sample', 'material', 'android', 'ios']
|
|
platforms: ['ios', 'android']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
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/main/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']
|
|
links: []
|
|
type: sample
|
|
web: web/form_app
|
|
|
|
- name: Navigation and Routing
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/navigation_and_routing1.png
|
|
alt: Navigation and Routing screenshot
|
|
- url: images/navigation_and_routing2.png
|
|
alt: Navigation and Routing screenshot
|
|
- url: images/navigation_and_routing3.png
|
|
alt: Navigation and Routing screenshot
|
|
- url: images/navigation_and_routing4.png
|
|
alt: Navigation and Routing screenshot
|
|
source: https://github.com/flutter/samples/tree/main/navigation_and_routing
|
|
description: >
|
|
A Flutter sample app that shows how to use how to use the Router API to
|
|
handle common navigation scenarios.
|
|
difficulty: advanced
|
|
widgets:
|
|
- Router
|
|
packages: []
|
|
tags: ['advanced', 'sample', 'navigation', 'router']
|
|
platforms: ['ios', 'android', 'web']
|
|
links: []
|
|
type: sample
|
|
web: web/navigation_and_routing
|
|
|
|
- name: Photo Search app
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/desktop_photo_search-fluent_ui.png
|
|
alt: Desktop Photo Search with FluentUI widgets
|
|
- url: images/desktop_photo_search-material.png
|
|
alt: Desktop Photo Search with Material widgets
|
|
source: https://github.com/flutter/samples/tree/main/desktop_photo_search
|
|
description: >
|
|
This is the Photo Search app, built out with two different widget sets,
|
|
`material` shows the Photo Search app built with Material widgets, and
|
|
`fluent_ui` shows the Photo Search app built with Fluent UI widgets.
|
|
difficulty: medium
|
|
widgets: []
|
|
packages:
|
|
- built_collection
|
|
- built_value
|
|
- file_selector
|
|
- fluent_ui
|
|
- flutter/material
|
|
- provider
|
|
- url_launcher
|
|
tags: ['desktop', 'rest-api']
|
|
platforms: ['windows', 'macos', 'linux']
|
|
type: sample
|
|
|
|
- name: Slide Puzzle
|
|
author: Very Good Ventures
|
|
screenshots:
|
|
- url: images/slide_puzzle1.png
|
|
alt: Slide Puzzle screenshot
|
|
source: https://github.com/VGVentures/slide_puzzle
|
|
description: >
|
|
A slide puzzle built for Flutter Challenge.
|
|
difficulty: advanced
|
|
widgets: []
|
|
packages: []
|
|
platforms: ['web']
|
|
links: []
|
|
tags: ['demo', 'game']
|
|
type: demo
|
|
|
|
###################
|
|
#### Web Demos ####
|
|
###################
|
|
|
|
- name: Rich Text Editor
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/simple_editor_active.png
|
|
alt: Advanced text editing with activity
|
|
- url: images/simple_editor_initial.png
|
|
alt: Advanced text editing in initial state
|
|
source: https://github.com/flutter/samples/tree/main/simplistic_editor
|
|
description: >
|
|
This is a fancy text editor sample which shows how to consume fine-grain
|
|
text editing and selection details from the framework's TextEditingDeltas
|
|
APIs.
|
|
difficulty: advanced
|
|
widgets:
|
|
- TextInput
|
|
packages: []
|
|
links: []
|
|
tags: ["demo", "text"]
|
|
platforms: ["ios", "android", "web", "windows", "macos", "linux"]
|
|
type: demo
|
|
web: web/simplistic_editor
|
|
|
|
- name: Material 3
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/material_3_components.png
|
|
alt: Components tab of the Material 3 demo
|
|
- url: images/material_3_color.png
|
|
alt: Colors tab of the Material 3 demo
|
|
- url: images/material_3_typography.png
|
|
alt: Typography tab of the Material 3 demo
|
|
- url: images/material_3_elevation.png
|
|
alt: Elevation tab of the Material 3 demo
|
|
- url: images/material_3_green.png
|
|
alt: Elevation tab of the Material 3 demo with seed color of green
|
|
source: https://github.com/flutter/samples/tree/main/material_3_demo
|
|
description: >
|
|
Showcases Material 3 features in the Flutter Material library.
|
|
These features include updated components, typography, color system and elevation support.
|
|
difficulty: beginner
|
|
widgets:
|
|
- Theme
|
|
- TextButton
|
|
- ElevatedButton
|
|
- OutlinedButton
|
|
- Text
|
|
- Card
|
|
- AppBar
|
|
packages: []
|
|
links: []
|
|
tags: ["material", "design"]
|
|
platforms: ["ios", "android", "web", "windows", "macos", "linux"]
|
|
type: demo
|
|
web: web/material_3_demo
|
|
|
|
- name: Game Template
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/loading_screen.png
|
|
alt: Loading screen
|
|
- url: images/level_selector.png
|
|
alt: Level selection screen
|
|
source: https://github.com/flutter/samples/tree/main/game_template
|
|
description: >
|
|
This is a game template that shows how to build much of the dressing
|
|
around an actual game. The game itself is very simple - the value in this
|
|
sample is everything around the game.
|
|
difficulty: beginner
|
|
widgets:
|
|
- GoRouter
|
|
- AppLifecycleObserver
|
|
packages:
|
|
- audioplayers
|
|
- firebase_crashlytics
|
|
- games_services
|
|
- go_router
|
|
- google_mobile_ads
|
|
- in_app_purchase
|
|
- logging
|
|
- provider
|
|
- shared_preferences
|
|
links: []
|
|
tags: ["games", "firebase", "ads", "crashlytics", "routing"]
|
|
platforms: ["ios", "android", "web", "windows", "macos", "linux"]
|
|
type: demo
|
|
web: web/game_template
|
|
|
|
- name: Charts
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/charts1.png
|
|
alt: Charts screenshot
|
|
source: https://github.com/google/charts
|
|
description: >
|
|
A general-purpose charting library.
|
|
difficulty: intermediate
|
|
widgets: []
|
|
packages: []
|
|
platforms: ['ios', 'android', 'web']
|
|
links: []
|
|
tags: ['demo', 'charts']
|
|
web: web/charts
|
|
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/main/web/github_dataviz
|
|
description: >
|
|
A visualization for Flutter repository data
|
|
difficulty: intermediate
|
|
widgets: []
|
|
packages: []
|
|
platforms: ['web']
|
|
links: []
|
|
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/main/web/particle_background
|
|
description: >
|
|
Flutter app demonstrating package:simple_animations in action.
|
|
difficulty: intermediate
|
|
widgets: []
|
|
packages: []
|
|
platforms: ['web']
|
|
links: []
|
|
tags: ['demo', 'animation']
|
|
web: web/particle_background
|
|
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']
|
|
links: []
|
|
tags: ['demo', 'animation']
|
|
web: https://z.flutter.gallery/#/dice
|
|
type: demo
|