Greg Spencer | e60087a | 2018-08-07 13:41:33 -0700 | [diff] [blame] | 1 | # <img src="https://flutter.io/images/flutter-mark-square-100.png" alt="Flutter" width="40" height="40" /> Flutter [](https://gitter.im/flutter/flutter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
Ian Hickson | 140d50f | 2018-08-12 00:14:13 -0700 | [diff] [blame] | 2 | [](https://cirrus-ci.com/github/flutter/flutter/master) |
Greg Spencer | e60087a | 2018-08-07 13:41:33 -0700 | [diff] [blame] | 3 | [](https://coveralls.io/github/flutter/flutter?branch=master) |
Ian Hickson | 4879329 | 2016-03-23 21:06:37 -0700 | [diff] [blame] | 4 | |
Michael Thomsen | 7f0f938 | 2018-08-27 11:11:14 +0200 | [diff] [blame] | 5 | |
| 6 | # Build beautiful native apps in record time |
| 7 | |
Shams Zakhour | 3c624f8 | 2018-08-23 19:23:02 -0700 | [diff] [blame] | 8 | Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 9 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 10 | ### Documentation |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 11 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 12 | * **Main site: [flutter.io][]** |
Shams Zakhour | 3c624f8 | 2018-08-23 19:23:02 -0700 | [diff] [blame] | 13 | * [Install](https://flutter.io/get-started/install/) |
| 14 | * [Get started](https://flutter.io/get-started/) |
Ahmed Abu Eldahab | 89c5ace | 2018-10-04 18:26:06 +0200 | [diff] [blame] | 15 | * [Changelog](https://github.com/flutter/flutter/wiki/Changelog) |
Kathy Walrath | 72d86f9 | 2018-09-20 13:15:51 -0700 | [diff] [blame] | 16 | * [Contribute](https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md#contributing-to-flutter) |
Adam Barth | 576795d | 2015-11-08 21:33:00 -0800 | [diff] [blame] | 17 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 18 | ## Fast development |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 19 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 20 | Flutter's <em>hot reload</em> helps you quickly |
| 21 | and easily experiment, build UIs, add features, and fix |
Yun | 34238f5 | 2018-07-03 15:50:58 -0700 | [diff] [blame] | 22 | bugs. Experience sub-second reload times, |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 23 | without losing state, on |
| 24 | emulators, simulators, and hardware for iOS |
| 25 | and Android. |
| 26 | |
Michael Thomsen | 7f0f938 | 2018-08-27 11:11:14 +0200 | [diff] [blame] | 27 | <img src="https://raw.githubusercontent.com/flutter/website/master/src/images/intellij/hot-reload.gif" alt="Make a change in your code, and your app changes instantly."> |
Filip Hracek | 39d2deb | 2017-07-12 10:58:12 -0700 | [diff] [blame] | 28 | |
Michael Thomsen | 7f0f938 | 2018-08-27 11:11:14 +0200 | [diff] [blame] | 29 | ## Expressive and flexible UI |
| 30 | Quickly ship features with a focus on native end-user experiences. |
| 31 | Layered architecture allows full customization, which results in incredibly |
| 32 | fast rendering and expressive and flexible designs. |
| 33 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 34 | |
| 35 | Delight your users with Flutter's built-in |
| 36 | beautiful Material Design and |
| 37 | Cupertino (iOS-flavor) widgets, rich motion APIs, |
| 38 | smooth natural scrolling, and platform awareness. |
| 39 | |
Günter Zöchbauer | bd0b666 | 2018-08-23 08:46:56 +0200 | [diff] [blame] | 40 | [<img src="https://github.com/flutter/website/blob/master/src/images/homepage/screenshot-1.png" width="270" height="480" alt="Brand-first shopping design" align="left">](https://github.com/flutter/flutter/tree/master/examples/flutter_gallery/lib/demo/animation) |
| 41 | [<img src="https://github.com/flutter/website/blob/master/src/images/homepage/screenshot-2.png" width="270" height="480" alt="Fitness app design">](https://github.com/flutter/posse_gallery) |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 42 | |
Günter Zöchbauer | bd0b666 | 2018-08-23 08:46:56 +0200 | [diff] [blame] | 43 | [<img src="https://github.com/flutter/website/blob/master/src/images/homepage/screenshot-3.png" width="270" height="480" alt="Contact app design" align="left">](https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/contacts_demo.dart) |
| 44 | [<img src="https://github.com/flutter/website/blob/master/src/images/homepage/ios-friendlychat.png" width="270" height="480" alt="iOS chat app design">](https://codelabs.developers.google.com/codelabs/flutter/) |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 45 | |
| 46 | Browse the <a href="https://flutter.io/widgets/">widget catalog</a>. |
| 47 | |
| 48 | ## Modern, reactive framework |
| 49 | |
| 50 | Easily compose your UI with Flutter's |
| 51 | modern functional-reactive framework and |
| 52 | rich set of platform, layout, and foundation widgets. |
| 53 | Solve your tough UI challenges with |
| 54 | powerful and flexible APIs for 2D, animation, gestures, |
| 55 | effects, and more. |
| 56 | |
| 57 | ```dart |
| 58 | class CounterState extends State<Counter> { |
| 59 | int counter = 0; |
| 60 | |
| 61 | void increment() { |
| 62 | // Tells the Flutter framework that state has changed, |
| 63 | // so the framework can run build() and update the display. |
| 64 | setState(() { |
| 65 | counter++; |
| 66 | }); |
| 67 | } |
| 68 | |
| 69 | Widget build(BuildContext context) { |
| 70 | // This method is rerun every time setState is called. |
| 71 | // The Flutter framework has been optimized to make rerunning |
| 72 | // build methods fast, so that you can just rebuild anything that |
| 73 | // needs updating rather than having to individually change |
| 74 | // instances of widgets. |
Rui Kowase | b9f6e2c | 2018-10-04 01:11:29 +0900 | [diff] [blame] | 75 | return Row( |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 76 | children: <Widget>[ |
Rui Kowase | b9f6e2c | 2018-10-04 01:11:29 +0900 | [diff] [blame] | 77 | RaisedButton( |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 78 | onPressed: increment, |
Rui Kowase | b9f6e2c | 2018-10-04 01:11:29 +0900 | [diff] [blame] | 79 | child: Text('Increment'), |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 80 | ), |
Rui Kowase | b9f6e2c | 2018-10-04 01:11:29 +0900 | [diff] [blame] | 81 | Text('Count: $counter'), |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 82 | ], |
| 83 | ); |
| 84 | } |
| 85 | } |
| 86 | ``` |
| 87 | |
| 88 | Browse the <a href="https://flutter.io/widgets/">widget catalog</a> |
| 89 | and learn more about the |
| 90 | <a href="https://flutter.io/widgets-intro/">functional-reactive framework</a>. |
| 91 | |
| 92 | ## Access native features and SDKs |
| 93 | |
| 94 | Make your app come to life |
| 95 | with platform APIs, 3rd party SDKs, |
| 96 | and native code. |
Mikkel Nygaard Ravn | e2988ad | 2017-12-21 11:33:22 +0100 | [diff] [blame] | 97 | Flutter lets you reuse your existing Java/Kotlin and ObjC/Swift code, |
| 98 | and access native features and SDKs on Android and iOS. |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 99 | |
| 100 | Accessing platform features is easy. Here is a snippet from our <a href="https://github.com/flutter/flutter/tree/master/examples/platform_channel">interop example</a>: |
| 101 | |
| 102 | ```dart |
Alexandre Ardhuin | 936dea2 | 2018-10-17 08:09:29 +0200 | [diff] [blame^] | 103 | Future<void> getBatteryLevel() async { |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 104 | var batteryLevel = 'unknown'; |
| 105 | try { |
| 106 | int result = await methodChannel.invokeMethod('getBatteryLevel'); |
| 107 | batteryLevel = 'Battery level: $result%'; |
| 108 | } on PlatformException { |
| 109 | batteryLevel = 'Failed to get battery level.'; |
| 110 | } |
| 111 | setState(() { |
| 112 | _batteryLevel = batteryLevel; |
| 113 | }); |
| 114 | } |
| 115 | ``` |
| 116 | |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 117 | Learn how to use <a href="https://flutter.io/using-packages/">packages</a>, or |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 118 | write <a href="https://flutter.io/platform-channels/">platform channels</a>, |
| 119 | to access native code, APIs, and SDKs. |
| 120 | |
| 121 | ## Unified app development |
| 122 | |
| 123 | Flutter has the tools and libraries to help you easily |
| 124 | bring your ideas to life on iOS and Android. |
| 125 | If you don't have any mobile development experience, Flutter |
| 126 | is an easy and fast way to build beautiful mobile apps. |
| 127 | If you are an experienced iOS or Android developer, |
| 128 | you can use Flutter for your views and leverage much of your |
Mikkel Nygaard Ravn | e2988ad | 2017-12-21 11:33:22 +0100 | [diff] [blame] | 129 | existing Java/Kotlin/ObjC/Swift investment. |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 130 | |
| 131 | ### Build |
| 132 | |
| 133 | * **Beautiful app UIs** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 134 | * Rich 2D GPU-accelerated APIs |
| 135 | * Reactive framework |
| 136 | * Animation/motion APIs |
| 137 | * Material Design and iOS widgets |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 138 | * **Fluid coding experience** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 139 | * Sub-second, stateful hot reload |
| 140 | * IntelliJ: refactor, code completion, etc |
| 141 | * Dart language and core libs |
| 142 | * Package manager |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 143 | * **Full-featured apps** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 144 | * Interop with mobile OS APIs & SDKs |
| 145 | * Gradle/Java/Kotlin |
| 146 | * Cocoapods/ObjC/Swift |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 147 | |
| 148 | ### Optimize |
| 149 | |
| 150 | * **Test** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 151 | * Unit testing |
| 152 | * Integration testing |
| 153 | * On-device testing |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 154 | * **Debug** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 155 | * IDE debugger |
| 156 | * Web-based debugger |
| 157 | * async/await aware |
| 158 | * Expression evaluator |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 159 | * **Profile** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 160 | * Timeline |
| 161 | * CPU and memory |
| 162 | * In-app perf charts |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 163 | |
| 164 | ### Deploy |
| 165 | |
| 166 | * **Compile** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 167 | * Native ARM code |
| 168 | * Dead code elimination |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 169 | * **Distribution** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 170 | * App Store |
| 171 | * Play Store |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 172 | |
| 173 | Learn more about what makes Flutter special in the |
| 174 | <a href="https://flutter.io/technical-overview/">technical overview</a>. |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 175 | |
Adam Barth | c887878 | 2016-10-31 21:53:27 -0700 | [diff] [blame] | 176 | Join us in our [Gitter chat room](https://gitter.im/flutter/flutter) or join our public mailing list, |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 177 | [flutter-dev@googlegroups.com](https://groups.google.com/forum/#!forum/flutter-dev). |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 178 | |
| 179 | [flutter.io]: https://flutter.io/ |