<!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>