|
3 | 3 | [](https://github.com/flutter/samples/actions?workflow=Main%20Branch%20CI) |
4 | 4 |
|
5 | 5 | A collection of open source samples that illustrate best practices for |
6 | | -[Flutter](https://flutter.dev). |
7 | | - |
8 | | -## Visual samples index |
9 | | - |
10 | | -The easiest way to browse through the samples in this repo (as well as a few others!) |
11 | | -is the [visual samples index](https://flutter.github.io/samples). |
12 | | - |
13 | | -## Tip: minimize download size |
14 | | - |
15 | | -As this repository is quite big, you can use svn to download a single example. |
| 6 | +[Flutter]. |
| 7 | + |
| 8 | +## Index |
| 9 | + |
| 10 | +### Quickstarts |
| 11 | + |
| 12 | +* [`asset_transformation`] - Demonstrates how to transform images' color scales and formats. |
| 13 | +* [`background_isolate_channels`] - Demonstrates how to use long-lived isolates. |
| 14 | +* [`code_sharing`] - Demonstrates how to share business logic between Flutter client and Dart server using [`package:shelf`] ) |
| 15 | +* [`context_menus`] - This sample shows how to create and customize cross-platform context menus, such as the text selection toolbar on mobile or the right click menu on desktop. |
| 16 | +* [`desktop_photo_search`] - Demonstrates desktop features in both Material and FluentUI design systems. |
| 17 | +* [`dynamic_theme`] - A developer sample demonstrating how to call on-device Flutter APIs based on output from the Gemini API. |
| 18 | +* [`form_app`] - A sample demonstrating different types of forms and best practices. |
| 19 | +* [`game_template`] - (**note: deprecated!**) A starter game in Flutter with all the bells and whistles of a mobile (iOS & Android) game. |
| 20 | +* [`gemini_tasks`] - A developer sample written in Flutter demonstrating how to interact with a to-do list in natural language using the Gemini API. |
| 21 | +* [`google_maps`] - Demonstrates the Google Maps for Flutter plugin. |
| 22 | +* [`infinite_list`] - A Flutter sample app that shows an implementation of the "infinite list" UX pattern. |
| 23 | +* [`isolate_example`] - A sample application that demonstrate best practices when using [isolates]. |
| 24 | +* [`navigation_and_routing`] - A sample that shows how to use [go_router] API to handle common navigation scenarios. |
| 25 | +* [`place_tracker`] - A sample place tracking app that uses the [google_maps_flutter plugin]. |
| 26 | +* [`platform_design`] - This sample project shows a Flutter app that maximizes application code reuse while adhering to different design patterns on Android and iOS. |
| 27 | +* [`provider_counter`] - The starter Flutter application, but using [package:provider] to manage state. |
| 28 | +* [`provider_shopper`] - A Flutter sample app that shows a state management approach using [package:provider]. |
| 29 | +* [`simple_shader`] - A simple [Flutter fragment shaders] sample project. |
| 30 | +* [`simplistic_calculator`] - A calculator to demonstrate a simple start for a desktop Flutter app. |
| 31 | +* [`simplistic_editor`] - This sample text editor showcases the use of [TextEditingDeltas] and a DeltaTextInputClient to expand and contract styled ranges of text. |
| 32 | +* [`testing_app`] - A sample app that shows different types of testing in Flutter. |
| 33 | +* [`web_embedding`] - This directory contains examples of how to embed Flutter in web apps (without iframes). |
| 34 | + * [`element_embedding_demo`] - Modifies the index.html of a flutter app so it is launched in a custom hostElement. This is the most basic embedding example. |
| 35 | + * [`ng-flutter`] - A simple Angular app (and component) that replicates the above example, but in an Angular style. |
| 36 | + |
| 37 | +### Native platform samples |
| 38 | + |
| 39 | +* [`add-to-app`] - Collection of samples that demonstrate embedding Flutter a view into a native app. |
| 40 | + * [`fullscreen`] — Embeds a full screen instance of |
| 41 | + Flutter into an existing iOS or Android app. |
| 42 | + * [`prebuilt_module`] — Embeds a full screen |
| 43 | + instance of Flutter as a prebuilt library that can be loaded into an existing |
| 44 | + iOS or Android app. |
| 45 | + * [`plugin`] — Embeds a full screen Flutter instance that |
| 46 | + is using plugins into an existing iOS or Android app. |
| 47 | + * [`books`] — Mimics a real world use-case of embedding Flutter into an |
| 48 | + existing Android app and demonstrates using [Pigeon] to communicate between Flutter and |
| 49 | + the host application. |
| 50 | + * [`multiple_flutters`] — Shows the usage of the Flutter |
| 51 | + Engine Group APIs to embed multiple instances of Flutter into an existing app |
| 52 | + with low memory cost. |
| 53 | + * [`android_view`] — Shows how to integrate a Flutter |
| 54 | + add-to-app module at a view level for Android. |
| 55 | +* [`android_splash_screen`] |
| 56 | +* [`ios_app_clip`] |
| 57 | +* [`platform_channels`] - A sample app which demonstrates how to use MethodChannel, EventChannel, BasicMessageChannel and MessageCodec in Flutter. |
| 58 | +* [`platform_view_swift`] - A Flutter sample app that combines a native iOS UIViewController with a full-screen Flutter view. |
| 59 | + |
| 60 | +### Demo galleries |
| 61 | + |
| 62 | +* [`animations`] - Showcases Flutter's animation features |
| 63 | +* [`material_3_demo`] - showcases [Material 3] features in the Flutter Material library. |
| 64 | + |
| 65 | +### Demo apps |
| 66 | + |
| 67 | +* [`compass_app`] - A sample application that implements MVVM architecture. |
| 68 | +* [`deeplink_store_example`] - A demo app that implements deep-linking with go_router. |
| 69 | +* [`veggie_seasons`] - A demo application. |
| 70 | + |
| 71 | +## Flutter sample code |
| 72 | + |
| 73 | +Samples are **correct and concise code** that developers |
| 74 | +can **quickly understand** and **easily reuse** with minimal side effects. |
| 75 | +Samples teach developers how to be successful using Flutter and Dart. |
| 76 | +They are maintained on an ongoing basis |
| 77 | +to reflect changing APIs and best practices. |
| 78 | + |
| 79 | +### Types of samples |
| 80 | + |
| 81 | +There are two types of sample code in this repository: |
| 82 | + |
| 83 | +* **Quickstarts** provide a starting point to extend. They answer the question, |
| 84 | + "What is the minimal amount of code needed to implement this feature?" |
| 85 | +* **Demo apps** are meant to be built and ran. They demo the _product_, |
| 86 | + not how to write code. |
| 87 | + |
| 88 | +A majority of samples in this repository are quickstarts. |
| 89 | + |
| 90 | +## Usage |
| 91 | + |
| 92 | +Every sample in this repo is fully runnable. To run an example, |
| 93 | +use `flutter run` inside that example's directory. |
| 94 | +See the [getting started guide] to install the `flutter` tool. |
| 95 | + |
| 96 | +> [!IMPORTANT] |
| 97 | +> If you want to run an add-to-app sample, there are additional requirements. |
| 98 | +> We suggest reading the [add-to-app documentation]. |
| 99 | +
|
| 100 | +### Tip: minimize download size |
| 101 | + |
| 102 | +As this repository is quite big, you can use |
| 103 | +[svn] to download a single example. |
16 | 104 | For example: |
17 | 105 |
|
18 | 106 | ``` |
19 | 107 | svn co https://github.com/flutter/samples/trunk/provider_shopper |
20 | 108 | ``` |
21 | 109 |
|
22 | | -You can also use a |
23 | | -[partial clone](https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/) |
24 | | -to skip blob objects that aren't currently checked out, |
25 | | -while including the full commit history: |
| 110 | +You can also use a [partial clone] to skip blob objects |
| 111 | +that aren't currently checked out, while including the full commit history: |
26 | 112 |
|
27 | 113 | ``` |
28 | 114 | git clone --filter=blob:none https://github.com/flutter/samples.git |
29 | 115 | ``` |
30 | 116 |
|
31 | 117 | ## Interested in contributing? |
32 | 118 |
|
33 | | -See the [contributor's guide](CONTRIBUTING.md)! |
| 119 | +See the [contributor's guide]! |
34 | 120 |
|
35 | 121 | ## Questions or issues? |
36 | 122 |
|
37 | 123 | If you have a general question about one of these samples or how to adapt its |
38 | 124 | techniques for one of your own apps, try one of these resources: |
39 | 125 |
|
40 | | -* [The FlutterDev Discord](https://discord.gg/rflutterdev) |
41 | | -* [StackOverflow](https://stackoverflow.com/questions/tagged/flutter) |
| 126 | +* [The FlutterDev Discord] |
| 127 | +* [The Flutter Community forum] |
42 | 128 |
|
43 | 129 | If you run into a bug in one of the samples, please file an issue in the |
44 | | -[`flutter/samples` issue tracker](https://github.com/flutter/samples/issues). |
45 | | - |
| 130 | +[`flutter/samples` issue tracker]. |
| 131 | + |
| 132 | + |
| 133 | +[`asset_transformation`]: ./asset_transformation |
| 134 | +[`background_isolate_channels`]: ./background_isolate_channels |
| 135 | +[`code_sharing`]: ./code_sharing |
| 136 | +[`context_menus`]: ./context_menus |
| 137 | +[`desktop_photo_search`]: ./desktop_photo_search |
| 138 | +[`dynamic_theme`]: ./dynamic_theme |
| 139 | +[`form_app`]: ./form_app |
| 140 | +[`game_template`]: ./game_template |
| 141 | +[`gemini_tasks`]: ./gemini_tasks |
| 142 | +[`google_maps`]: ./google_maps |
| 143 | +[`infinite_list`]: ./infinite_list |
| 144 | +[`isolate_example`]: ./isolate_example |
| 145 | +[`navigation_and_routing`]: ./navigation_and_routing |
| 146 | +[`place_tracker`]: ./place_tracker |
| 147 | +[`platform_design`]: ./platform_design |
| 148 | +[`provider_counter`]: ./provider_counter |
| 149 | +[`provider_shopper`]: ./provider_shopper |
| 150 | +[`simple_shader`]: ./simple_shader |
| 151 | +[`simplistic_calculator`]: ./simplistic_calculator |
| 152 | +[`simplistic_editor`]: ./simplistic_editor |
| 153 | +[`testing_app`]: ./testing_app |
| 154 | +[`web_embedding`]: ./web_embedding |
| 155 | +[`element_embedding_demo`]: ./web_embedding/element_embedding_demo |
| 156 | +[`ng-flutter`]: ./web_embedding/ng-flutter |
| 157 | +[`add-to-app`]: ./add_to_app |
| 158 | +[`fullscreen`]: ./add_to_app/fullscreen |
| 159 | +[`prebuilt_module`]: ./add_to_app/prebuilt_module |
| 160 | +[`plugin`]: ./add_to_app/plugin |
| 161 | +[`books`]: ./add_to_app/books |
| 162 | +[`multiple_flutters`]: ./add_to_app/multiple_flutters |
| 163 | +[`android_view`]: ./add_to_app/android_view |
| 164 | +[`android_splash_screen`]: ./android_splash_screen |
| 165 | +[`ios_app_clip`]: ./ios_app_clip |
| 166 | +[`platform_channels`]: ./platform_channels |
| 167 | +[`platform_view_swift`]: ./platform_view_swift |
| 168 | +[`animations`]: ./animations |
| 169 | +[`material_3_demo`]: ./material_3_demo |
| 170 | +[`compass_app`]: ./compass_app |
| 171 | +[`deeplink_store_example`]: ./deeplink_store_example |
| 172 | +[`veggie_seasons`]: ./veggieseasons |
| 173 | + |
| 174 | +[Flutter]: https://flutter.dev |
| 175 | +[getting started guide]: https://docs.flutter.dev/get-started/install |
| 176 | +[add-to-app documentation]: https://docs.flutter.dev/add-to-app |
| 177 | +[isolates]: https://api.dart.dev/dart-isolate/Isolate-class.html |
| 178 | +[Material 3]: https://m3.material.io |
| 179 | +[go_router]: https://pub.dev/packages/go_router |
| 180 | +[google_maps_flutter plugin]: https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter |
| 181 | +[package:provider]: https://pub.dev/packages/provider |
| 182 | +[Flutter fragment shaders]: https://docs.flutter.dev/development/ui/advanced/shaders |
| 183 | +[TextEditingDeltas]: https://api.flutter.dev/flutter/services/TextEditingDelta-class.html |
| 184 | +[Pigeon]: https://pub.dev/packages/pigeon |
| 185 | +[`package:shelf`]: https://pub.dev/packages/shelf |
| 186 | +[svn]: https://subversion.apache.org/ |
| 187 | +[partial clone]: https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/ |
| 188 | +[contributing guide]: CONTRIBUTING.md |
| 189 | +[The FlutterDev Discord]: https://discord.gg/rflutterdev |
| 190 | +[The Flutter Community forum]: https://forum.itsallwidgets.com/latest |
| 191 | +[`flutter/samples` issue tracker]: https://github.com/flutter/samples/issues |
0 commit comments