|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>Flutter samples</title>
|
|
|
<link href="styles.css" rel="stylesheet" media="screen">
|
|
|
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Google+Sans+Display|Roboto:300,400,500&display=swap" rel="stylesheet">
|
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<script src="packages/mdc_web/material-components-web.min.js"></script>
|
|
|
<script defer src="main.dart.js"></script>
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-67589403-8"></script>
|
|
|
<script>
|
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
function gtag(){dataLayer.push(arguments);}
|
|
|
gtag('js', new Date());
|
|
|
gtag('config', 'UA-67589403-8');
|
|
|
</script>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="content">
|
|
|
<div class="navbar">
|
|
|
<a class="leading" href="./">
|
|
|
<img src="images/logos/logo_lockup_flutter_horizontal_wht_96.png" />
|
|
|
<span class="title">Samples</span>
|
|
|
</a>
|
|
|
<div class="nav-items">
|
|
|
<a href="https://flutter.dev/">Flutter Home</a>
|
|
|
<a href="https://api.flutter.dev/">API Docs</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
<div class="index-header">
|
|
|
<h1>All Samples</h1>
|
|
|
<p>A curated list of Flutter samples and apps</p>
|
|
|
</div>
|
|
|
<div class="search-container">
|
|
|
<div id="search-bar" class="mdc-text-field mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon">
|
|
|
<i class="material-icons mdc-text-field__icon">search</i>
|
|
|
<i id="clear-button" class="material-icons mdc-text-field__icon" role="button" tabindex="0">clear</i>
|
|
|
<input class="mdc-text-field__input" id="text-field-hero-input">
|
|
|
<div class="mdc-line-ripple"></div>
|
|
|
<label for="text-field-hero-input" class="mdc-floating-label">Search</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-menu">
|
|
|
<div class="filter-buttons">
|
|
|
<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
|
|
|
<div class="mdc-chip mdc-chip--selected" role="row">
|
|
|
<div class="mdc-chip__ripple"></div>
|
|
|
<span role="gridcell">
|
|
|
<span role="button" tabindex="0" class="mdc-chip__text">All</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="mdc-chip" role="row">
|
|
|
<div class="mdc-chip__ripple"></div>
|
|
|
<span role="gridcell">
|
|
|
<span role="button" tabindex="-1" class="mdc-chip__text">Sample</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="mdc-chip" role="row">
|
|
|
<div class="mdc-chip__ripple"></div>
|
|
|
<span role="gridcell">
|
|
|
<span role="button" tabindex="-1" class="mdc-chip__text">Cookbook</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="mdc-chip" role="row">
|
|
|
<div class="mdc-chip__ripple"></div>
|
|
|
<span role="gridcell">
|
|
|
<span role="button" tabindex="-1" class="mdc-chip__text">Web Demos</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="filter-end"></div>
|
|
|
</div>
|
|
|
<div class="grid">
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="gallery tag:intermediate intermediate tag:sample sample tag:gallery gallery tag:material material tag:design design tag:vignettes vignettes platform:web web platform:ios ios platform:android android widget:AlertDialog widget:AppBar widget:BottomAppBar widget:BottomNavigationBar widget:BottomSheet widget:Card widget:Checkbox widget:ChoiceChip widget:CircularProgressIndicator widget:Container widget:CupertinoActivityIndicator widget:CupertinoAlertDialog widget:CupertinoButton widget:CupertinoButton widget:CupertinoDatePicker widget:CupertinoDialogAction widget:CupertinoNavigationBar widget:CupertinoPageScaffold widget:CupertinoSegmentedControl widget:CupertinoSlider widget:CupertinoSlidingSegmentedControl widget:CupertinoSliverRefreshControl widget:CupertinoSwitch widget:CupertinoTabView widget:CupertinoTextField widget:CupertinoTheme widget:DayPicker widget:FilterChip widget:FlatButton widget:FloatingActionButton widget:GridTile widget:GridView widget:Icon widget:InputChip widget:LayoutBuilder widget:LinearProgressIndicator widget:ListTile widget:ListView widget:MaterialBanner widget:MonthPicker widget:PaginatedDataTable widget:PopupMenuButton widget:PopupMenuItem widget:Radio widget:RaisedButton widget:RangeSlider widget:Scaffold widget:SimpleDialog widget:Slider widget:SnackBar widget:Switch widget:TabBar widget:TabBarView widget:TextField widget:TextFormField widget:Tooltip widget:YearPicker package:flutter/material package:flutter/cupertino package:google_fonts package:scoped_model type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="gallery.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/gallery1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Gallery</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A collection of Material Design & Cupertino widgets, behaviors, ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add to app tag:advanced advanced tag:sample sample tag:add-to-app add-to-app tag:android android tag:ios ios tag:native native tag:embedding embedding platform:ios ios platform:android android widget:WidgetsFlutterBinding widget:MethodChannel package:flutter/material package:flutter/services package:provider type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_to_app.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/add_to_app1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add to App</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Android and iOS projects that each import a standalone Flutter m...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="code sharing tag:intermediate intermediate tag:sample sample tag:code-sharing code-sharing tag:dart dart tag:server server platform:android android platform:ios ios platform:linux linux platform:macos macos platform:web web platform:windows windows package:freezed package:shelf type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="code_sharing.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/code_sharing_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Code Sharing</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Demonstrates simple way to share business logic between a Flutte...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animations tag:intermediate intermediate tag:sample sample tag:animation animation platform:ios ios platform:android android platform:web web widget:AnimatedContainer widget:PageRouteBuilder widget:AnimationController widget:SingleTickerProviderStateMixin widget:Tween widget:AnimatedBuilder widget:TweenSequence widget:TweenSequenceItem package:flutter/material type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animations.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/animations1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animations</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Sample apps that showcasing Flutter's animation features.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="flutter maps firestore tag:intermediate intermediate tag:sample sample tag:firebase firebase tag:maps maps platform:ios ios platform:android android widget:GoogleMap package:flutter/material package:cloud_firestore package:google_maps_flutter package:google_maps_webservice type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="flutter_maps_firestore.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/flutter_maps_firestore1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Flutter Maps Firestore</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows the end product of the Cloud Nex...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="isolate example tag:intermediate intermediate tag:sample sample tag:isolates isolates tag:concurrency concurrency platform:ios ios platform:android android widget:FutureBuilder widget:AnimationController package:dart:isolate package:dart:math type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="isolate_example.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/isolate1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Isolate Example</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A sample application that demonstrate best practices when using ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="jsonexample tag:beginner beginner tag:sample sample platform:ios ios platform:android android widget:Table widget:TableRow package:json_serializable package:built_value package:built_collection package:json_annotation package:build_runner package:built_value_generator type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="jsonexample.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/jsonexample1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">jsonexample</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that deserializes a set of JSON strings usi...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="place tracker tag:intermediate intermediate tag:sample sample tag:json json tag:serialization serialization platform:android android widget:GoogleMap package:google_maps_flutter type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="place_tracker.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/place_tracker1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Place Tracker</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A sample place tracking app that uses the google_maps_flutter pl...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="platform design tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios platform:android android widget:TargetPlatform package:flutter/material package:flutter/cupertino type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="platform_design.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_design1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Platform Design</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter app that maximizes application code reuse while adheri...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="platform view swift tag:advanced advanced tag:sample sample tag:ios ios platform:ios ios widget:MethodChannel package:flutter/material package:flutter/services type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="platform_view_swift.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/platform_view_swift1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Platform View Swift</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that combines a native iOS UIViewController...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="infinite list tag:sample sample tag:material material tag:design design tag:android android tag:ios ios platform:ios ios platform:android android widget:Selector widget:AppBar widget:ListTile widget:ListView package:provider package:meta type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="infinite_list.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/infinite_list_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Infinite List</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows an implementation of the "infini...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="ios app clip tag:sample sample tag:device info device info tag:ios ios platform:ios ios widget:CupertinoApp widget:AppBar widget:FlutterLogo package:device_info type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="i_o_s_app_clip.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/ios_app_clip_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">IOS App Clip</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows the demonstrating integration wi...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="testing app tag:sample sample tag:material material tag:android android tag:ios ios platform:ios ios platform:android android widget:AppBar widget:ListTile widget:ListView widget:Snackbar package:provider type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="testing_app.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/testing_app1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Testing App</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows different types of testing in Fl...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="provider shopper tag:intermediate intermediate tag:sample sample tag:provider provider platform:ios ios platform:android android platform:web web widget:Provider widget:MultiProvider widget:ChangeNotifier package:provider type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="provider_shopper.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/provider_shopper1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Provider Shopper</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows a state management approach usin...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="web dashboard tag:intermediate intermediate tag:sample sample tag:firebase firebase platform:ios ios platform:android android platform:web web widget:AdaptiveScaffold widget:NavigationRail widget:FutureBuilder widget:StreamBuilder package:firebase type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="web_dashboard.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/web_dashboard1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Web Dashboard</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A dashboard app that displays daily entries. Demonstrates Adapti...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="form app tag:intermediate intermediate tag:sample sample tag:forms forms platform:ios ios platform:android android platform:web web widget:Form type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="form_app.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/form_app1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Form App</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows how to use Forms.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="navigation and routing tag:advanced advanced tag:sample sample tag:navigation navigation tag:router router platform:ios ios platform:android android platform:web web widget:Router type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="navigation_and_routing.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/navigation_and_routing1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Navigation and Routing</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A Flutter sample app that shows how to use how to use the Router...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="photo search app tag:desktop desktop tag:rest-api rest-api platform:windows windows platform:macos macos platform:linux linux package:built_collection package:built_value package:file_selector package:fluent_ui package:flutter/material package:provider package:url_launcher type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="photo_search_app.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/desktop_photo_search-fluent_ui_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Photo Search app</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">This is the Photo Search app, built out with two different widge...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="slide puzzle tag:demo demo tag:game game platform:web web type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="slide_puzzle.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/slide_puzzle1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Slide Puzzle</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A slide puzzle built for Flutter Challenge.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="rich text editor tag:demo demo tag:text text platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:TextInput type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="rich_text_editor.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/simple_editor_active_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Rich Text Editor</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">This is a fancy text editor sample which shows how to consume fi...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="material 3 tag:material material tag:design design platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:Theme widget:TextButton widget:ElevatedButton widget:OutlinedButton widget:Text widget:Card widget:AppBar type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="material_3.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/material_3_components_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Material 3</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Showcases Material 3 features in the Flutter Material library. T...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="game template tag:games games tag:firebase firebase tag:ads ads tag:crashlytics crashlytics tag:routing routing platform:ios ios platform:android android platform:web web platform:windows windows platform:macos macos platform:linux linux widget:GoRouter widget:AppLifecycleObserver package:audioplayers package:firebase_crashlytics package:games_services package:go_router package:google_mobile_ads package:in_app_purchase package:logging package:provider package:shared_preferences type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="game_template.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/loading_screen_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Game Template</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">This is a game template that shows how to build much of the dres...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="dice tag:demo demo tag:animation animation platform:web web type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="dice.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/dice_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Dice</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A demo of 3d animation using dice
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="web embedding tag:demo demo tag:web web tag:add-to-app add-to-app tag:embedding embedding platform:web web type:demo">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="web_embedding.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/web_embedding1_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">demo</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Web Embedding</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">An example app showing how to embed Flutter in a web application...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="next gen ui demo platform:Windows, macOS, Linux, web, Android, iOS Windows, macOS, Linux, web, Android, iOS package:flutter_animate type:sample">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="next_gen_u_i_demo.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/next_gen_ui_demo_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">sample</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Next Gen UI demo</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A sample version of the Next Generation UI codelab for demoing a...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a page route transition tag:cookbook cookbook tag:animation animation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_page_route_transition.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animation-page-route-animation_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a page route transition</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">A design language, such as Material, defines standard behaviors ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a widget using a physics simulation tag:cookbook cookbook tag:animation animation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_widget_using_a_physics_simulation.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animation-physics-simulation_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a widget using a physics simulation</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Physics simulations can make app interactions feel realistic and...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate the properties of a container tag:cookbook cookbook tag:animation animation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_the_properties_of_a_container.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animation-animated-container_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate the properties of a container</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">The Container class provides a convenient way
|
|
|
to create a widget...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fade a widget in and out tag:cookbook cookbook tag:animation animation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fade_a_widget_in_and_out.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/animation-opacity-animation_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fade a widget in and out</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">UI developers often need to show and hide elements on screen.
|
|
|
Ho...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add a drawer to a screen tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_a_drawer_to_a_screen.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-drawer_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add a Drawer to a screen</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In apps that use Material Design,
|
|
|
there are two primary options ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="display a snackbar tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="display_a_snackbar.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-snackbars_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Display a snackbar</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">It can be useful to briefly inform your users when certain actio...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="export fonts from a package tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="export_fonts_from_a_package.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-package-fonts_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Export fonts from a package</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Rather than declaring a font as part of an app,
|
|
|
you can declare ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="update the ui based on orientation tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="update_the_u_i_based_on_orientation.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-orientation_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Update the UI based on orientation</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some situations,
|
|
|
you want to update the display of an app whe...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use a custom font tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_a_custom_font.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-fonts_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use a custom font</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Although Android and iOS offer high quality system fonts,
|
|
|
one of...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use themes to share colors and font styles tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_themes_to_share_colors_and_font_styles.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-themes_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use themes to share colors and font styles</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">To share colors and font styles throughout an app, use themes.
|
|
|
Y...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with tabs tag:cookbook cookbook tag:design design type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_tabs.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/design-tabs_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with tabs</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Working with tabs is a common pattern in apps that follow the
|
|
|
Ma...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="build a form with validation tag:cookbook cookbook tag:forms forms type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="build_a_form_with_validation.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/forms-validation_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Build a form with validation</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Apps often require users to enter information into a text field....</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create and style a text field tag:cookbook cookbook tag:forms forms type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_and_style_a_text_field.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/forms-text-input_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create and style a text field</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Text fields allow users to type text into an app.
|
|
|
They are used ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="focus and text fields tag:cookbook cookbook tag:forms forms type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="focus_and_text_fields.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/forms-focus_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Focus and text fields</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">When a text field is selected and accepting input,
|
|
|
it is said to...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle changes to a text field tag:cookbook cookbook tag:forms forms type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_changes_to_a_text_field.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/forms-text-field-changes_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle changes to a text field</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, it’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/forms-retrieve-input_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Retrieve the value of a text field</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In this recipe,
|
|
|
learn how to retrieve the text a user has entere...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="add material touch ripples tag:cookbook cookbook tag:gestures gestures type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="add_material_touch_ripples.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/gestures-ripples_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Add Material touch ripples</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Widgets that follow the Material Design guidelines display
|
|
|
a rip...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle taps tag:cookbook cookbook tag:gestures gestures type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_taps.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/gestures-handling-taps_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle taps</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">You not only want to display information to users,
|
|
|
you want user...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="implement swipe to dismiss tag:cookbook cookbook tag:gestures gestures type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="implement_swipe_to_dismiss.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/gestures-dismissible_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Implement swipe to dismiss</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">The “swipe to dismiss” pattern is common in many mobile apps.
|
|
|
Fo...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="display images from the internet tag:cookbook cookbook tag:images images type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="display_images_from_the_internet.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/images-network-image_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Display images from the internet</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Displaying images is fundamental for most mobile apps.
|
|
|
Flutter p...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fade in images with a placeholder tag:cookbook cookbook tag:images images type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fade_in_images_with_a_placeholder.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/images-fading-in-images_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fade in images with a placeholder</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">When displaying images using the default Image widget,
|
|
|
you might...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with cached images tag:cookbook cookbook tag:images images type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_cached_images.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/images-cached-images_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with cached images</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, it’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/lists-grid-lists_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create a grid list</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, you might want to display your items as a grid ra...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create a horizontal list tag:cookbook cookbook tag:lists lists type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_a_horizontal_list.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/lists-horizontal-list_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create a horizontal list</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">You might want to create a list that scrolls
|
|
|
horizontally rather...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="create lists with different types of items tag:cookbook cookbook tag:lists lists type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="create_lists_with_different_types_of_items.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/lists-mixed-list_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Create lists with different types of items</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">You might need to create lists that display different types of c...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="place a floating app bar above a list tag:cookbook cookbook tag:lists lists type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="place_a_floating_app_bar_above_a_list.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/lists-floating-app-bar_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Place a floating app bar above a list</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">To make it easier for users to view a list of items,
|
|
|
you might w...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="use lists tag:cookbook cookbook tag:lists lists type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="use_lists.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/lists-basic-list_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Use lists</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Displaying lists of data is a fundamental pattern for mobile app...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with long lists tag:cookbook cookbook tag:lists lists type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_long_lists.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/lists-long-lists_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with long lists</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">The standard ListView constructor works well
|
|
|
for small lists. To...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="report errors to a service tag:cookbook cookbook tag:maintenance maintenance type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="report_errors_to_a_service.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/maintenance-error-reporting_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Report errors to a service</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">While one always tries to create apps that are free of bugs,
|
|
|
the...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="animate a widget across screens tag:cookbook cookbook tag:navigation navigation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="animate_a_widget_across_screens.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-hero-animations_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Animate a widget across screens</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">It’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-navigation-basics_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Navigate to a new screen and back</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Most apps contain several screens for displaying different types...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="navigate with named routes tag:cookbook cookbook tag:navigation navigation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="navigate_with_named_routes.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-named-routes_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Navigate with named routes</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In the Navigate to a new screen and back recipe,
|
|
|
you learned how...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="pass arguments to a named route tag:cookbook cookbook tag:navigation navigation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="pass_arguments_to_a_named_route.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-navigate-with-arguments_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Pass arguments to a named route</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">The Navigator provides the ability to navigate
|
|
|
to a named route ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="return data from a screen tag:cookbook cookbook tag:navigation navigation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="return_data_from_a_screen.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-returning-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Return data from a screen</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, you might want to return data from a new screen.
|
|
|
...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="send data to a new screen tag:cookbook cookbook tag:navigation navigation type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="send_data_to_a_new_screen.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/navigation-passing-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Send data to a new screen</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Often, you not only want to navigate to a new screen,
|
|
|
but also p...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="delete data on the internet tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="delete_data_on_the_internet.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-delete-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Delete data on the internet</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">This recipe covers how to delete data over
|
|
|
the internet using th...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="fetch data from the internet tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="fetch_data_from_the_internet.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-fetch-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Fetch data from the internet</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Fetching data from the internet is necessary for most apps.
|
|
|
Luck...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="make authenticated requests tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="make_authenticated_requests.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-authenticated-requests_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Make authenticated requests</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">To fetch data from most web services, you need to provide
|
|
|
author...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="parse json in the background tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="parse_j_s_o_n_in_the_background.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-background-parsing_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Parse JSON in the background</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">By default, Dart apps do all of their work on a single thread.
|
|
|
I...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="send data to the internet tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="send_data_to_the_internet.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-send-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Send data to the internet</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Sending data to the internet is necessary for most apps.
|
|
|
The htt...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="update data over the internet tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="update_data_over_the_internet.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-update-data_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Update data over the internet</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Updating data over the internet is necessary for most apps.
|
|
|
The ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="work with websockets tag:cookbook cookbook tag:networking networking type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="work_with_web_sockets.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/networking-web-sockets_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Work with WebSockets</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In addition to normal HTTP requests,
|
|
|
you can connect to servers ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="persist data with sqlite tag:cookbook cookbook tag:persistence persistence type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="persist_data_with_s_q_lite.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/persistence-sqlite_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Persist data with SQLite</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">If you are writing an app that needs to persist and query large ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="read and write files tag:cookbook cookbook tag:persistence persistence type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="read_and_write_files.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/persistence-reading-writing-files_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Read and write files</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In some cases, you need to read and write files to disk.
|
|
|
For exa...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="store key-value data on disk tag:cookbook cookbook tag:persistence persistence type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="store_key-value_data_on_disk.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/persistence-key-value_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Store key-value data on disk</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">If you have a relatively small collection of key-values
|
|
|
to save,...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="play and pause a video tag:cookbook cookbook tag:plugins plugins type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="play_and_pause_a_video.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/plugins-play-video_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Play and pause a video</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Playing videos is a common task in app development,
|
|
|
and Flutter ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="take a picture using the camera tag:cookbook cookbook tag:plugins plugins type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="take_a_picture_using_the_camera.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/plugins-picture-using-camera_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Take a picture using the camera</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Many apps require working with the device’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/integration-introduction_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to integration testing</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Unit tests and widget tests are handy for testing individual cla...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="handle scrolling tag:cookbook cookbook tag:integration integration type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="handle_scrolling.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/integration-scrolling_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Handle scrolling</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Many apps feature lists of content,
|
|
|
from email clients to music ...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="performance profiling tag:cookbook cookbook tag:integration integration type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="performance_profiling.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/integration-profiling_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Performance profiling</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">When it comes to mobile apps, performance is critical to user ex...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="an introduction to unit testing tag:cookbook cookbook tag:unit unit type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="an_introduction_to_unit_testing.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/unit-introduction_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to unit testing</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">How can you ensure that your app continues to work as you
|
|
|
add mo...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="mock dependencies using mockito tag:cookbook cookbook tag:unit unit type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="mock_dependencies_using_mockito.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/unit-mocking_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Mock dependencies using Mockito</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Sometimes, unit tests might depend on classes that fetch data fr...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="an introduction to widget testing tag:cookbook cookbook tag:widget widget type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="an_introduction_to_widget_testing.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/widget-introduction_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">An introduction to widget testing</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">In the introduction to unit testing recipe,
|
|
|
you learned how to t...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="find widgets tag:cookbook cookbook tag:widget widget type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="find_widgets.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/widget-finders_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Find widgets</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">To locate widgets in a test environment, use the Finder
|
|
|
classes....</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mdc-card demo-card mdc-elevation--z0" search-attrs="tap, drag, and enter text tag:cookbook cookbook tag:widget widget type:cookbook">
|
|
|
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0" href="tap_drag_and_enter_text.html">
|
|
|
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url('images/cookbook/widget-tap-drag_thumb.png');"></div>
|
|
|
<div class="demo-card__label type-label">cookbook</div>
|
|
|
<div class="demo-card__primary">
|
|
|
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Tap, drag, and enter text</h2>
|
|
|
</div>
|
|
|
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Many widgets not only display information, but also respond
|
|
|
to u...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
<div class="footer">
|
|
|
<span>© Flutter 2023</span>
|
|
|
</div>
|
|
|
|
|
|
</html>
|
|
|
|
