mirror of
https://github.com/flutter/samples.git
synced 2026-03-22 12:28:11 +00:00
450fe911d7
Reorganizes the samples index to deprioritize the gallery in favor of some recent web demos, particularly the Material 3 demo. This PR does keep the gallery in the index, as it is no more out of date than other samples and there are plans to retire this index. It however updates its demo link to a new Firebase destination that will remain hosted for posterity. Closes https://github.com/flutter/samples/issues/2139
600 lines
18 KiB
YAML
600 lines
18 KiB
YAML
samples:
|
|
- 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: [ ]
|
|
tags: [ "material", "design", "gallery" ]
|
|
platforms: [ "ios", "android", "web", "windows", "macos", "linux" ]
|
|
type: demo
|
|
web: web/material_3_demo
|
|
|
|
- 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: []
|
|
tags: ["demo", "text"]
|
|
platforms: ["ios", "android", "web", "windows", "macos", "linux"]
|
|
type: demo
|
|
web: web/simplistic_editor
|
|
|
|
- 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 screenshot
|
|
source: https://github.com/flutter/gallery
|
|
web: https://flutter-gallery-archive.web.app
|
|
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']
|
|
type: demo
|
|
|
|
- name: Web Embedding
|
|
author: Flutter and Angular
|
|
screenshots:
|
|
- url: images/web_embedding1.png
|
|
alt: A Flutter app embedded in an Angular app
|
|
- url: images/web_embedding2.png
|
|
alt: A Flutter app embedded in an Angular app
|
|
source: https://github.com/flutter/samples/tree/main/web_embedding
|
|
description: >
|
|
An example app showing how to embed Flutter in a web application using Angular
|
|
difficulty: advanced
|
|
widgets: []
|
|
packages: []
|
|
platforms: ['web']
|
|
tags: ['demo', 'web', 'add-to-app', 'embedding']
|
|
web: https://flutter-angular.web.app/
|
|
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']
|
|
type: sample
|
|
|
|
- name: Code Sharing
|
|
author: Flutter
|
|
screenshots:
|
|
- url: images/code_sharing.jpg
|
|
alt: Counter app communicating with server
|
|
source: https://github.com/flutter/samples/tree/main/code_sharing
|
|
description: >
|
|
Demonstrates simple way to share business logic between a Flutter app and
|
|
a server running Dart.
|
|
difficulty: intermediate
|
|
packages:
|
|
- freezed
|
|
- shelf
|
|
tags: ['intermediate', 'sample', 'code-sharing', 'dart', 'server']
|
|
platforms: ['android', 'ios', 'linux', 'macos', 'web', 'windows']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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']
|
|
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 Dashboard 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']
|
|
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']
|
|
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']
|
|
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']
|
|
tags: ['demo', 'game']
|
|
type: 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
|
|
tags: ["games", "firebase", "ads", "crashlytics", "routing"]
|
|
platforms: ["ios", "android", "web", "windows", "macos", "linux"]
|
|
type: demo
|
|
web: web/game_template
|
|
|
|
- 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
|