You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
samples/index.html

933 lines
76 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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, its useful to run a callback function every time...</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, its handy to cache images as theyre downloaded ...</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">Its often helpful to guide users through an app as they navigat...</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 devices cameras to
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>