|
|
<!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>
|
|
|
</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 widgets, behaviors, and vignette...</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="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="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="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_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">Charts</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A general-purpose charting library.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" 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_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">Filipino Cuisine</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Flutter Create challenge entry
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" 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_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">GitHub Dataviz</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A visualization for Flutter repository data
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" 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_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">Particle Background</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Flutter app demonstrating package:simple_animations in action.
|
|
|
</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 (15) puzzle implemented in Dart and Flutter.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" 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_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">Timeflow</h2>
|
|
|
</div>
|
|
|
<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--z0" 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_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">Vision Challenge</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A fun game to test your color perception abilities.
|
|
|
</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="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_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/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/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/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/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/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/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/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/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/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/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/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/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/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/text-field-changes_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle changes to a text field</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, it’s 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/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/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/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/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/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/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/cached-images_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with cached images</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, it’s handy to cache images as they’re 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/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/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/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/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/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/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/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/hero-animations_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a widget across screens</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">It’s 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-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/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/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/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/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="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_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/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 many 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/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/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="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_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/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 writing an app that needs to persist and query larger amounts...</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/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/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/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/picture-using-camera_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Take a picture using the camera</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Many apps require working with the device’s 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/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/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/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/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/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/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/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/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 2020</span>
|
|
|
</div>
|
|
|
|
|
|
</html>
|
|
|
|
