@ -4,7 +4,7 @@
< meta charset = "utf-8" >
< title > Flutter samples< / title >
< link href = "styles.css" rel = "stylesheet" media = "screen" >
< link href = "https://fonts.googleapis.com/css?family= Roboto:100, 300,400,500,7 00&display=swap" rel = "stylesheet" >
< 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 >
@ -15,7 +15,7 @@
< div class = "content" >
< div class = "navbar" >
< a class = "leading" href = "./" >
< img src = "images/logos/logo_lockup_flutter_horizontal_wht .png" / >
< img src = "images/logos/logo_lockup_flutter_horizontal_wht _96 .png" / >
< span class = "title" > Samples< / span >
< / a >
< div class = "nav-items" >
@ -69,7 +69,7 @@
< div class = "filter-end" > < / div >
< / div >
< div class = "grid" >
< div class = "mdc-card demo-card mdc-elevation--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -79,7 +79,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A collection of material design widgets, behaviors, and vignette...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -89,7 +89,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -100,7 +100,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -110,7 +110,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -120,7 +120,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -130,7 +130,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -140,7 +140,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -150,7 +150,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -160,7 +160,7 @@
< 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--z 2 " 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 demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > sample< / div >
@ -170,7 +170,7 @@
< 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--z 2 " search-attrs = "charts tag:demo demo tag:charts charts platform:ios ios platform:android android platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "charts tag:demo demo tag:charts charts platform:ios ios platform:android android platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "charts.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/charts1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -181,7 +181,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "filipino cuisine tag:demo demo tag:flutter create flutter create platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "filipino cuisine tag:demo demo tag:flutter create flutter create platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "filipino_cuisine.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/filipino_cuisine1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -192,7 +192,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "github dataviz tag:demo demo tag:data data tag:visualization visualization platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "github dataviz tag:demo demo tag:data data tag:visualization visualization platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "git_hub_dataviz.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/github_dataviz1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -203,7 +203,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "particle background tag:demo demo tag:animation animation platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "particle background tag:demo demo tag:animation animation platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "particle_background.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/particle_background1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -214,7 +214,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "slide puzzle tag:demo demo tag:game game platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -225,7 +225,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "timeflow tag:demo demo tag:animation animation platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "timeflow tag:demo demo tag:animation animation platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "timeflow.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/timeflow1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -235,7 +235,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > A gentle animation that provides a calming experience to stresse...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "vision challenge tag:demo demo tag:game game platform:web web type:demo" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " search-attrs = "vision challenge tag:demo demo tag:game game platform:web web type:demo" >
< div class = "mdc-card__primary-action demo-card__primary-action" tabindex = "0" href = "vision_challenge.html" >
< div class = "mdc-card__media mdc-card__media--16-9 demo-card__media" style = "background-image: url('images/vision_challenge1.png');" > < / div >
< div class = "demo-card__label type-label" > demo< / div >
@ -246,7 +246,7 @@
< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "animate a page route transition tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/page-route-animation.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -256,7 +256,7 @@
< 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--z 2 " search-attrs = "animate a widget using a physics simulation tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/physics-simulation.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -266,7 +266,7 @@
< 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--z 2 " search-attrs = "animate the properties of a container tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/animated-container.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -277,7 +277,7 @@
to create a widget...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "fade a widget in and out tag:cookbook cookbook tag:animation animation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/opacity-animation.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -288,7 +288,7 @@
Ho...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "add a drawer to a screen tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/drawer.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -299,7 +299,7 @@
there are two primary options ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "display a snackbar tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/snackbars.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -309,7 +309,7 @@
< 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--z 2 " search-attrs = "export fonts from a package tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/package-fonts.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -320,7 +320,7 @@
you can declare ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "update the ui based on orientation tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/orientation.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -331,7 +331,7 @@
you want to update the display of an app whe...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "use a custom font tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/fonts.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -342,7 +342,7 @@
one of...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "use themes to share colors and font styles tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/themes.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -353,7 +353,7 @@
Y...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "work with tabs tag:cookbook cookbook tag:design design type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/tabs.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -364,7 +364,7 @@
Ma...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "build a form with validation tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/validation.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -374,7 +374,7 @@
< 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--z 2 " search-attrs = "create and style a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/text-input.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -385,7 +385,7 @@
They are used ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "focus and text fields tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/focus.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -396,7 +396,7 @@
it is said to...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "handle changes to a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/text-field-changes.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -406,7 +406,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, it’ s useful to run a callback function every time...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "retrieve the value of a text field tag:cookbook cookbook tag:forms forms type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/retrieve-input.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -417,7 +417,7 @@
learn how to retrieve the text a user has entere...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "add material touch ripples tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/ripples.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -428,7 +428,7 @@
a rip...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "handle taps tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/handling-taps.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -439,7 +439,7 @@
you want user...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "implement swipe to dismiss tag:cookbook cookbook tag:gestures gestures type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/dismissible.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -450,7 +450,7 @@
Fo...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "display images from the internet tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/network-image.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -461,7 +461,7 @@
Flutter p...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "fade in images with a placeholder tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/fading-in-images.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -472,7 +472,7 @@
you might...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "work with cached images tag:cookbook cookbook tag:images images type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/cached-images.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -482,7 +482,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > In some cases, it’ s handy to cache images as they’ re downloaded ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "create a grid list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/grid-lists.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -492,7 +492,7 @@
< 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--z 2 " search-attrs = "create a horizontal list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/horizontal-list.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -503,7 +503,7 @@
horizontally rather...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "create lists with different types of items tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/mixed-list.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -513,7 +513,7 @@
< 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--z 2 " search-attrs = "place a floating app bar above a list tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/floating-app-bar.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -524,7 +524,7 @@
you might w...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "use lists tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/basic-list.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -534,7 +534,7 @@
< 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--z 2 " search-attrs = "work with long lists tag:cookbook cookbook tag:lists lists type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/long-lists.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -545,7 +545,7 @@
for small lists. To...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "report errors to a service tag:cookbook cookbook tag:maintenance maintenance type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/error-reporting.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -556,7 +556,7 @@
the...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "animate a widget across screens tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/hero-animations.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -566,7 +566,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > It’ s often helpful to guide users through an app as they navigat...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "navigate to a new screen and back tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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-basics.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -576,7 +576,7 @@
< 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--z 2 " search-attrs = "navigate with named routes tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/named-routes.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -587,7 +587,7 @@
you learned how...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "pass arguments to a named route tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/navigate-with-arguments.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -598,7 +598,7 @@
to a named route ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "return data from a screen tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/returning-data.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -609,7 +609,7 @@
...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "send data to a new screen tag:cookbook cookbook tag:navigation navigation type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/passing-data.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -620,7 +620,7 @@
but also p...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "fetch data from the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/fetch-data.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -631,7 +631,7 @@
Luck...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "make authenticated requests tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/authenticated-requests.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -642,7 +642,7 @@
author...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "parse json in the background tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/background-parsing.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -653,7 +653,7 @@
I...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "send data to the internet tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/send-data.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -664,7 +664,7 @@
The htt...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "work with websockets tag:cookbook cookbook tag:networking networking type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/web-sockets.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -675,7 +675,7 @@
you can connect to servers ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "persist data with sqlite tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/sqlite.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -685,7 +685,7 @@
< div class = "demo-card__secondary mdc-typography mdc-typography--body2" > If writing an app that needs to persist and query larger amounts...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "read and write files tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/reading-writing-files.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -696,7 +696,7 @@
For exa...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "store key-value data on disk tag:cookbook cookbook tag:persistence persistence type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/key-value.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -707,7 +707,7 @@
to save,...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "play and pause a video tag:cookbook cookbook tag:plugins plugins type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/play-video.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -718,7 +718,7 @@
and Flutter ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "take a picture using the camera tag:cookbook cookbook tag:plugins plugins type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/picture-using-camera.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -729,7 +729,7 @@
take phot...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "an introduction to integration testing tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/introduction.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -739,7 +739,7 @@
< 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--z 2 " search-attrs = "handle scrolling tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/scrolling.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -750,7 +750,7 @@
from email clients to music ...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "performance profiling tag:cookbook cookbook tag:integration integration type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/profiling.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -760,7 +760,7 @@
< 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--z 2 " search-attrs = "an introduction to unit testing tag:cookbook cookbook tag:unit unit type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/introduction.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -770,7 +770,7 @@
< 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--z 2 " search-attrs = "mock dependencies using mockito tag:cookbook cookbook tag:unit unit type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/mocking.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -780,7 +780,7 @@
< 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--z 2 " search-attrs = "an introduction to widget testing tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/introduction.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -791,7 +791,7 @@
you learned how to t...< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "find widgets tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/finders.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >
@ -802,7 +802,7 @@
classes....< / div >
< / div >
< / div >
< div class = "mdc-card demo-card mdc-elevation--z 2 " search-attrs = "tap, drag, and enter text tag:cookbook cookbook tag:widget widget type:cookbook" >
< div class = "mdc-card demo-card mdc-elevation--z 0 " 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/tap-drag.png');" > < / div >
< div class = "demo-card__label type-label" > cookbook< / div >