<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Flutter samples< / title >
< link href = "styles.css" rel = "stylesheet" media = "screen" >
< link href = "https://fonts.googleapis.com/css?family=Google+Sans|Google+Sans+Display|Roboto:300,400,500&display=swap" rel = "stylesheet" >
< link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< script src = "packages/mdc_web/material-components-web.min.js" > < / script >
< script defer src = "main.dart.js" > < / script >
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-67589403-8" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-67589403-8');
< / script >
< / head >
< body >
< div class = "content" >
< div class = "navbar" >
< a class = "leading" href = "./" >
< img src = "images/logos/logo_lockup_flutter_horizontal_wht_96.png" / >
< span class = "title" > Samples< / span >
< / a >
< div class = "nav-items" >
< a href = "https://flutter.dev/" > Flutter Home< / a >
< a href = "https://api.flutter.dev/" > API Docs< / a >
< / div >
< / div >
< div class = "container" >
< div class = "index-header" >
< h1 > All Samples< / h1 >
< p > A curated list of Flutter samples and apps< / p >
< / div >
< div class = "search-container" >
< div id = "search-bar" class = "mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon" >
< i class = "material-icons mdc-text-field__icon" > search< / i >
< i id = "clear-button" class = "material-icons mdc-text-field__icon" role = "button" tabindex = "0" > clear< / i >
< input class = "mdc-text-field__input" id = "text-field-hero-input" >
< div class = "mdc-line-ripple" > < / div >
< label for = "text-field-hero-input" class = "mdc-floating-label" > Search< / label >
< / div >
< / div >
< div class = "filter-menu" >
< div class = "filter-buttons" >
< div class = "mdc-chip-set mdc-chip-set--choice" role = "grid" >
< div class = "mdc-chip mdc-chip--selected" role = "row" >
< div class = "mdc-chip__ripple" > < / div >
< span role = "gridcell" >
< span role = "button" tabindex = "0" class = "mdc-chip__text" > All< / span >
< / span >
< / div >
< div class = "mdc-chip" role = "row" >
< div class = "mdc-chip__ripple" > < / div >
< span role = "gridcell" >
< span role = "button" tabindex = "-1" class = "mdc-chip__text" > Sample< / span >
< / span >
< / div >
< div class = "mdc-chip" role = "row" >
< div class = "mdc-chip__ripple" > < / div >
< span role = "gridcell" >
< span role = "button" tabindex = "-1" class = "mdc-chip__text" > Web Demos< / span >
< / span >
< / div >
< / div >
< / div >
< div class = "filter-end" > < / div >
< / div >
< div class = "grid" >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "material 3 tag:material material tag:design design tag:gallery gallery platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:Theme widget:TextButton widget:ElevatedButton widget:OutlinedButton widget:Text widget:Card widget:AppBar type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "material_3.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/material_3_components_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Material 3< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Showcases Material 3 features in the Flutter Material library. T...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "rich text editor tag:demo demo tag:text text platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:TextInput type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "rich_text_editor.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/simple_editor_active_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Rich Text Editor< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > This is a fancy text editor sample which shows how to consume fi...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "web embedding tag:demo demo tag:web web tag:add-to-app add-to-app tag:embedding embedding platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "web_embedding.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/web_embedding1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Web Embedding< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > An example app showing how to embed Flutter in a web application...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "add to app tag:advanced advanced tag:sample sample tag:add-to-app add-to-app tag:android android tag:ios ios tag:native native tag:embedding embedding platform:ios ios platform:android android widget:WidgetsFlutterBinding widget:MethodChannel package:flutter/material package:flutter/services package:provider type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "add_to_app.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/add_to_app1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Add to App< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Android and iOS projects that each import a standalone Flutter m...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "code sharing tag:intermediate intermediate tag:sample sample tag:code-sharing code-sharing tag:dart dart tag:server server platform:android android platform:ios ios platform:linux linux platform:macos macos platform:web web platform:windows windows package:freezed package:shelf type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "code_sharing.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/code_sharing_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Code Sharing< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Demonstrates simple way to share business logic between a Flutte...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "animations tag:intermediate intermediate tag:sample sample tag:animation animation platform:ios ios platform:android android platform:web web widget:AnimatedContainer widget:PageRouteBuilder widget:AnimationController widget:SingleTickerProviderStateMixin widget:Tween widget:AnimatedBuilder widget:TweenSequence widget:TweenSequenceItem package:flutter/material type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "animations.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/animations1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Animations< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Sample apps that showcasing Flutter's animation features.
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "flutter maps firestore tag:intermediate intermediate tag:sample sample tag:firebase firebase tag:maps maps platform:ios ios platform:android android widget:GoogleMap package:flutter/material package:cloud_firestore package:google_maps_flutter package:google_maps_webservice type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "flutter_maps_firestore.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/flutter_maps_firestore1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Flutter Maps Firestore< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows the end product of the Cloud Nex...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "isolate example tag:intermediate intermediate tag:sample sample tag:isolates isolates tag:concurrency concurrency platform:ios ios platform:android android widget:FutureBuilder widget:AnimationController package:dart:isolate package:dart:math type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "isolate_example.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/isolate1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Isolate Example< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A sample application that demonstrate best practices when using ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "place tracker tag:intermediate intermediate tag:sample sample tag:json json tag:serialization serialization platform:android android widget:GoogleMap package:google_maps_flutter type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "place_tracker.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/place_tracker1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Place Tracker< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A sample place tracking app that uses the google_maps_flutter pl...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "platform design tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios platform:android android widget:TargetPlatform package:flutter/material package:flutter/cupertino type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "platform_design.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/platform_design1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Platform Design< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter app that maximizes application code reuse while adheri...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "platform view swift tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios widget:MethodChannel package:flutter/material package:flutter/services type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "platform_view_swift.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/platform_view_swift1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Platform View Swift< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that combines a native iOS UIViewController...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "infinite list tag:sample sample tag:material material tag:design design tag:android android tag:ios ios platform:ios ios platform:android android widget:Selector widget:AppBar widget:ListTile widget:ListView package:provider package:meta type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "infinite_list.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/infinite_list_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Infinite List< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows an implementation of the "infini...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "ios app clip tag:sample sample tag:device info device info tag:ios ios platform:ios ios widget:CupertinoApp widget:AppBar widget:FlutterLogo package:device_info type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "i_o_s_app_clip.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/ios_app_clip_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > IOS App Clip< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows the demonstrating integration wi...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "testing app tag:sample sample tag:material material tag:android android tag:ios ios platform:ios ios platform:android android widget:AppBar widget:ListTile widget:ListView widget:Snackbar package:provider type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "testing_app.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/testing_app1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Testing App< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows different types of testing in Fl...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "provider shopper tag:intermediate intermediate tag:sample sample tag:provider provider platform:ios ios platform:android android platform:web web widget:Provider widget:MultiProvider widget:ChangeNotifier package:provider type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "provider_shopper.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/provider_shopper1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Provider Shopper< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows a state management approach usin...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "web dashboard tag:intermediate intermediate tag:sample sample tag:firebase firebase platform:ios ios platform:android android platform:web web widget:AdaptiveScaffold widget:NavigationRail widget:FutureBuilder widget:StreamBuilder package:firebase type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "web_dashboard.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/web_dashboard1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Web Dashboard< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A dashboard app that displays daily entries. Demonstrates Adapti...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "form app tag:intermediate intermediate tag:sample sample tag:forms forms platform:ios ios platform:android android platform:web web widget:Form type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "form_app.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/form_app1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Form App< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows how to use Forms.
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "navigation and routing tag:advanced advanced tag:sample sample tag:navigation navigation tag:router router platform:ios ios platform:android android platform:web web widget:Router type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "navigation_and_routing.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/navigation_and_routing1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Navigation and Routing< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that shows how to use how to use the Router...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "photo search app tag:desktop desktop tag:rest-api rest-api platform:windows windows platform:macos macos platform:linux linux package:built_collection package:built_value package:file_selector package:fluent_ui package:flutter/material package:provider package:url_launcher type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "photo_search_app.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/desktop_photo_search-fluent_ui_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Photo Search app< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > This is the Photo Search app, built out with two different widge...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "slide puzzle tag:demo demo tag:game game platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "slide_puzzle.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/slide_puzzle1_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Slide Puzzle< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A slide puzzle built for Flutter Challenge.
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "game template tag:games games tag:firebase firebase tag:ads ads tag:crashlytics crashlytics tag:routing routing platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:GoRouter widget:AppLifecycleObserver package:audioplayers package:firebase_crashlytics package:games_services package:go_router package:google_mobile_ads package:in_app_purchase package:logging package:provider package:shared_preferences type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "game_template.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/loading_screen_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Game Template< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > This is a game template that shows how to build much of the dres...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "dice tag:demo demo tag:animation animation platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "dice.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/dice_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Dice< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A demo of 3d animation using dice
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< div class = "footer" >
< span > © Flutter 2024< / span >
< / div >
< / html >
