<!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" > Cookbook< / 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 = "gallery tag:intermediate intermediate tag:sample sample tag:gallery gallery tag:material material tag:design design tag:vignettes vignettes platform:web web platform:ios ios platform:android android widget:AlertDialog widget:AppBar widget:BottomAppBar widget:BottomNavigationBar widget:BottomSheet widget:Card widget:Checkbox widget:ChoiceChip widget:CircularProgressIndicator widget:Container widget:CupertinoActivityIndicator widget:CupertinoAlertDialog widget:CupertinoButton widget:CupertinoButton widget:CupertinoDatePicker widget:CupertinoDialogAction widget:CupertinoNavigationBar widget:CupertinoPageScaffold widget:CupertinoSegmentedControl widget:CupertinoSlider widget:CupertinoSlidingSegmentedControl widget:CupertinoSliverRefreshControl widget:CupertinoSwitch widget:CupertinoTabView widget:CupertinoTextField widget:CupertinoTheme widget:DayPicker widget:FilterChip widget:FlatButton widget:FloatingActionButton widget:GridTile widget:GridView widget:Icon widget:InputChip widget:LayoutBuilder widget:LinearProgressIndicator widget:ListTile widget:ListView widget:MaterialBanner widget:MonthPicker widget:PaginatedDataTable widget:PopupMenuButton widget:PopupMenuItem widget:Radio widget:RaisedButton widget:RangeSlider widget:Scaffold widget:SimpleDialog widget:Slider widget:SnackBar widget:Switch widget:TabBar widget:TabBarView widget:TextField widget:TextFormField widget:Tooltip widget:YearPicker package:flutter/material package:flutter/cupertino package:google_fonts package:scoped_model type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "gallery.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/gallery1_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" > Gallery< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A collection of Material Design & Cupertino widgets, behaviors, ...< / 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 = "jsonexample tag:beginner beginner tag:sample sample platform:ios ios platform:android android widget:Table widget:TableRow package:json_serializable package:built_value package:built_collection package:json_annotation package:build_runner package:built_value_generator type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "jsonexample.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/jsonexample1_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" > jsonexample< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A Flutter sample app that deserializes a set of JSON strings usi...< / 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 = "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 = "material 3 tag:material material tag:design design 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 = "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 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 = "next gen ui demo platform:Windows, macOS, Linux, web, Android, iOS Windows, macOS, Linux, web, Android, iOS package:flutter_animate type:sample" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "next_gen_u_i_demo.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/next_gen_ui_demo_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" > Next Gen UI demo< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A sample version of the Next Generation UI codelab for demoing a...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "animate a page route transition tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "animate_a_page_route_transition.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/animation-page-route-animation_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Animate a page route transition< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A design language, such as Material, defines standard behaviors ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "animate a widget using a physics simulation tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "animate_a_widget_using_a_physics_simulation.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/animation-physics-simulation_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Animate a widget using a physics simulation< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Physics simulations can make app interactions feel realistic and...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "animate the properties of a container tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "animate_the_properties_of_a_container.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/animation-animated-container_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Animate the properties of a container< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > The Container class provides a convenient way
to create a widget...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "fade a widget in and out tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "fade_a_widget_in_and_out.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/animation-opacity-animation_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Fade a widget in and out< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > UI developers often need to show and hide elements on screen.
Ho...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "add a drawer to a screen tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "add_a_drawer_to_a_screen.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-drawer_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Add a Drawer to a screen< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In apps that use Material Design,
there are two primary options ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "display a snackbar tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "display_a_snackbar.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-snackbars_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Display a snackbar< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > It can be useful to briefly inform your users when certain actio...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "export fonts from a package tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "export_fonts_from_a_package.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-package-fonts_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Export fonts from a package< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Rather than declaring a font as part of an app,
you can declare ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "update the ui based on orientation tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "update_the_u_i_based_on_orientation.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-orientation_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Update the UI based on orientation< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some situations,
you want to update the display of an app whe...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "use a custom font tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "use_a_custom_font.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-fonts_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Use a custom font< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Although Android and iOS offer high quality system fonts,
one of...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "use themes to share colors and font styles tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "use_themes_to_share_colors_and_font_styles.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-themes_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Use themes to share colors and font styles< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > To share colors and font styles throughout an app, use themes.
Y...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "work with tabs tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "work_with_tabs.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/design-tabs_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Work with tabs< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Working with tabs is a common pattern in apps that follow the
Ma...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "build a form with validation tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "build_a_form_with_validation.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/forms-validation_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Build a form with validation< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Apps often require users to enter information into a text field....< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "create and style a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "create_and_style_a_text_field.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/forms-text-input_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Create and style a text field< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Text fields allow users to type text into an app.
They are used ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "focus and text fields tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "focus_and_text_fields.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/forms-focus_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Focus and text fields< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > When a text field is selected and accepting input,
it is said to...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "handle changes to a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "handle_changes_to_a_text_field.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/forms-text-field-changes_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Handle changes to a text field< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, it’ < / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "retrieve the value of a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "retrieve_the_value_of_a_text_field.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/forms-retrieve-input_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Retrieve the value of a text field< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In this recipe,
learn how to retrieve the text a user has entere...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "add material touch ripples tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "add_material_touch_ripples.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/gestures-ripples_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Add Material touch ripples< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Widgets that follow the Material Design guidelines display
a rip...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "handle taps tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "handle_taps.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/gestures-handling-taps_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Handle taps< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > You not only want to display information to users,
you want user...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "implement swipe to dismiss tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "implement_swipe_to_dismiss.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/gestures-dismissible_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Implement swipe to dismiss< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > The “swipe to dismiss” pattern is common in many mobile apps.
Fo...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "display images from the internet tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "display_images_from_the_internet.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/images-network-image_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Display images from the internet< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Displaying images is fundamental for most mobile apps.
Flutter p...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "fade in images with a placeholder tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "fade_in_images_with_a_placeholder.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/images-fading-in-images_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Fade in images with a placeholder< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > When displaying images using the default Image widget,
you might...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "work with cached images tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "work_with_cached_images.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/images-cached-images_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Work with cached images< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, it’ ’ < / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "create a grid list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "create_a_grid_list.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-grid-lists_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Create a grid list< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, you might want to display your items as a grid ra...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "create a horizontal list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "create_a_horizontal_list.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-horizontal-list_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Create a horizontal list< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > You might want to create a list that scrolls
horizontally rather...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "create lists with different types of items tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "create_lists_with_different_types_of_items.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-mixed-list_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Create lists with different types of items< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > You might need to create lists that display different types of c...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "place a floating app bar above a list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "place_a_floating_app_bar_above_a_list.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-floating-app-bar_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Place a floating app bar above a list< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > To make it easier for users to view a list of items,
you might w...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "use lists tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "use_lists.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-basic-list_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Use lists< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Displaying lists of data is a fundamental pattern for mobile app...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "work with long lists tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "work_with_long_lists.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/lists-long-lists_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Work with long lists< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > The standard ListView constructor works well
for small lists. To...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "report errors to a service tag:cookbook cookbook tag:maintenance maintenance type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "report_errors_to_a_service.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/maintenance-error-reporting_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Report errors to a service< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > While one always tries to create apps that are free of bugs,
the...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "animate a widget across screens tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "animate_a_widget_across_screens.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-hero-animations_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Animate a widget across screens< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > It’ < / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "navigate to a new screen and back tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "navigate_to_a_new_screen_and_back.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-navigation-basics_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Navigate to a new screen and back< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Most apps contain several screens for displaying different types...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "navigate with named routes tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "navigate_with_named_routes.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-named-routes_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Navigate with named routes< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In the Navigate to a new screen and back recipe,
you learned how...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "pass arguments to a named route tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "pass_arguments_to_a_named_route.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-navigate-with-arguments_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Pass arguments to a named route< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > The Navigator provides the ability to navigate
to a named route ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "return data from a screen tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "return_data_from_a_screen.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-returning-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Return data from a screen< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, you might want to return data from a new screen.
...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "send data to a new screen tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "send_data_to_a_new_screen.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/navigation-passing-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Send data to a new screen< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Often, you not only want to navigate to a new screen,
but also p...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "delete data on the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "delete_data_on_the_internet.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-delete-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Delete data on the internet< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > This recipe covers how to delete data over
the internet using th...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "fetch data from the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "fetch_data_from_the_internet.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-fetch-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Fetch data from the internet< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Fetching data from the internet is necessary for most apps.
Luck...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "make authenticated requests tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "make_authenticated_requests.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-authenticated-requests_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Make authenticated requests< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > To fetch data from most web services, you need to provide
author...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "parse json in the background tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "parse_j_s_o_n_in_the_background.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-background-parsing_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Parse JSON in the background< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > By default, Dart apps do all of their work on a single thread.
I...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "send data to the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "send_data_to_the_internet.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-send-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Send data to the internet< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Sending data to the internet is necessary for most apps.
The htt...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "update data over the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "update_data_over_the_internet.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-update-data_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Update data over the internet< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Updating data over the internet is necessary for most apps.
The ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "work with websockets tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "work_with_web_sockets.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/networking-web-sockets_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Work with WebSockets< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In addition to normal HTTP requests,
you can connect to servers ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "persist data with sqlite tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "persist_data_with_s_q_lite.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/persistence-sqlite_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Persist data with SQLite< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > If you are writing an app that needs to persist and query large ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "read and write files tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "read_and_write_files.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/persistence-reading-writing-files_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Read and write files< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, you need to read and write files to disk.
For exa...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "store key-value data on disk tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "store_key-value_data_on_disk.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/persistence-key-value_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Store key-value data on disk< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > If you have a relatively small collection of key-values
to save,...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "play and pause a video tag:cookbook cookbook tag:plugins plugins type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "play_and_pause_a_video.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/plugins-play-video_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Play and pause a video< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Playing videos is a common task in app development,
and Flutter ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "take a picture using the camera tag:cookbook cookbook tag:plugins plugins type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "take_a_picture_using_the_camera.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/plugins-picture-using-camera_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Take a picture using the camera< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Many apps require working with the device’
take phot...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "an introduction to integration testing tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "an_introduction_to_integration_testing.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/integration-introduction_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > An introduction to integration testing< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Unit tests and widget tests are handy for testing individual cla...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "handle scrolling tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "handle_scrolling.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/integration-scrolling_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Handle scrolling< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Many apps feature lists of content,
from email clients to music ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "performance profiling tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "performance_profiling.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/integration-profiling_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Performance profiling< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > When it comes to mobile apps, performance is critical to user ex...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "an introduction to unit testing tag:cookbook cookbook tag:unit unit type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "an_introduction_to_unit_testing.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/unit-introduction_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > An introduction to unit testing< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > How can you ensure that your app continues to work as you
add mo...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "mock dependencies using mockito tag:cookbook cookbook tag:unit unit type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "mock_dependencies_using_mockito.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/unit-mocking_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Mock dependencies using Mockito< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Sometimes, unit tests might depend on classes that fetch data fr...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "an introduction to widget testing tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "an_introduction_to_widget_testing.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/widget-introduction_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > An introduction to widget testing< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In the introduction to unit testing recipe,
you learned how to t...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "find widgets tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "find_widgets.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/widget-finders_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Find widgets< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > To locate widgets in a test environment, use the Finder
classes....< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z0" search-attrs = "tap, drag, and enter text tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "tap_drag_and_enter_text.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/cookbook/widget-tap-drag_thumb.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
< div class = "demo-card__primary" >
< h2 class = "demo-card__title mdc-typography mdc-typography--headline6" > Tap, drag, and enter text< / h2 >
< / div >
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > Many widgets not only display information, but also respond
to u...< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< div class = "footer" >
< span > © Flutter 2023< / span >
< / div >
< / html >
