-
Notifications
You must be signed in to change notification settings - Fork 7.7k
/
Copy pathindex.html
307 lines (303 loc) · 24 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!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">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="material 3 tag:material material tag:design design tag:gallery gallery 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="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="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="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="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="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>
</div>
</div>
</body>
<div class="footer">
<span>© Flutter 2025</span>
</div>
</html>