Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -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) [](https://travis-ci.org/flutter/flutter) [](https://ci.appveyor.com/project/flutter/flutter/branch/master) [](https://coveralls.io/github/flutter/flutter?branch=master) |
Ian Hickson | 4879329 | 2016-03-23 21:06:37 -0700 | [diff] [blame] | 2 | |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 3 | A new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android. Flutter is an open-source project currently in beta. |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 4 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 5 | ### Documentation |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 6 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 7 | * **Main site: [flutter.io][]** |
| 8 | * [Install](https://flutter.io/setup/) |
| 9 | * [Get started](https://flutter.io/getting-started/) |
| 10 | * [Contribute](CONTRIBUTING.md) |
Adam Barth | 576795d | 2015-11-08 21:33:00 -0800 | [diff] [blame] | 11 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 12 | ## Fast development |
Adam Barth | 7b0bbdb | 2015-10-30 11:16:58 -0700 | [diff] [blame] | 13 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 14 | Flutter's <em>hot reload</em> helps you quickly |
| 15 | and easily experiment, build UIs, add features, and fix |
| 16 | bugs faster. Experience sub-second reload times, |
| 17 | without losing state, on |
| 18 | emulators, simulators, and hardware for iOS |
| 19 | and Android. |
| 20 | |
Filip Hracek | 39d2deb | 2017-07-12 10:58:12 -0700 | [diff] [blame] | 21 | <img src="https://user-images.githubusercontent.com/919717/28131204-0f8c3cda-66ee-11e7-9428-6a0513eac75d.gif" alt="Make a change in your code, and your app is changed instantly."> |
| 22 | |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 23 | ## Expressive, beautiful UIs |
| 24 | |
| 25 | Delight your users with Flutter's built-in |
| 26 | beautiful Material Design and |
| 27 | Cupertino (iOS-flavor) widgets, rich motion APIs, |
| 28 | smooth natural scrolling, and platform awareness. |
| 29 | |
Michael Thomsen | fd516d9 | 2018-01-09 19:37:59 +0100 | [diff] [blame] | 30 | [<img src="https://github.com/flutter/website/blob/master/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) |
| 31 | [<img src="https://github.com/flutter/website/blob/master/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] | 32 | |
Michael Thomsen | fd516d9 | 2018-01-09 19:37:59 +0100 | [diff] [blame] | 33 | [<img src="https://github.com/flutter/website/blob/master/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) |
| 34 | [<img src="https://github.com/flutter/website/blob/master/images/homepage/ios-friendlychat.png" width="270" height="480" alt="iOS chat app design">](https://codelabs.developers.google.com/codelabs/flutter-firebase) |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 35 | |
| 36 | Browse the <a href="https://flutter.io/widgets/">widget catalog</a>. |
| 37 | |
| 38 | ## Modern, reactive framework |
| 39 | |
| 40 | Easily compose your UI with Flutter's |
| 41 | modern functional-reactive framework and |
| 42 | rich set of platform, layout, and foundation widgets. |
| 43 | Solve your tough UI challenges with |
| 44 | powerful and flexible APIs for 2D, animation, gestures, |
| 45 | effects, and more. |
| 46 | |
| 47 | ```dart |
| 48 | class CounterState extends State<Counter> { |
| 49 | int counter = 0; |
| 50 | |
| 51 | void increment() { |
| 52 | // Tells the Flutter framework that state has changed, |
| 53 | // so the framework can run build() and update the display. |
| 54 | setState(() { |
| 55 | counter++; |
| 56 | }); |
| 57 | } |
| 58 | |
| 59 | Widget build(BuildContext context) { |
| 60 | // This method is rerun every time setState is called. |
| 61 | // The Flutter framework has been optimized to make rerunning |
| 62 | // build methods fast, so that you can just rebuild anything that |
| 63 | // needs updating rather than having to individually change |
| 64 | // instances of widgets. |
| 65 | return new Row( |
| 66 | children: <Widget>[ |
| 67 | new RaisedButton( |
| 68 | onPressed: increment, |
| 69 | child: new Text('Increment'), |
| 70 | ), |
| 71 | new Text('Count: $counter'), |
| 72 | ], |
| 73 | ); |
| 74 | } |
| 75 | } |
| 76 | ``` |
| 77 | |
| 78 | Browse the <a href="https://flutter.io/widgets/">widget catalog</a> |
| 79 | and learn more about the |
| 80 | <a href="https://flutter.io/widgets-intro/">functional-reactive framework</a>. |
| 81 | |
| 82 | ## Access native features and SDKs |
| 83 | |
| 84 | Make your app come to life |
| 85 | with platform APIs, 3rd party SDKs, |
| 86 | and native code. |
Mikkel Nygaard Ravn | e2988ad | 2017-12-21 11:33:22 +0100 | [diff] [blame] | 87 | Flutter lets you reuse your existing Java/Kotlin and ObjC/Swift code, |
| 88 | and access native features and SDKs on Android and iOS. |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 89 | |
| 90 | 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>: |
| 91 | |
| 92 | ```dart |
| 93 | Future<Null> getBatteryLevel() async { |
| 94 | var batteryLevel = 'unknown'; |
| 95 | try { |
| 96 | int result = await methodChannel.invokeMethod('getBatteryLevel'); |
| 97 | batteryLevel = 'Battery level: $result%'; |
| 98 | } on PlatformException { |
| 99 | batteryLevel = 'Failed to get battery level.'; |
| 100 | } |
| 101 | setState(() { |
| 102 | _batteryLevel = batteryLevel; |
| 103 | }); |
| 104 | } |
| 105 | ``` |
| 106 | |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 107 | 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] | 108 | write <a href="https://flutter.io/platform-channels/">platform channels</a>, |
| 109 | to access native code, APIs, and SDKs. |
| 110 | |
| 111 | ## Unified app development |
| 112 | |
| 113 | Flutter has the tools and libraries to help you easily |
| 114 | bring your ideas to life on iOS and Android. |
| 115 | If you don't have any mobile development experience, Flutter |
| 116 | is an easy and fast way to build beautiful mobile apps. |
| 117 | If you are an experienced iOS or Android developer, |
| 118 | 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] | 119 | existing Java/Kotlin/ObjC/Swift investment. |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 120 | |
| 121 | ### Build |
| 122 | |
| 123 | * **Beautiful app UIs** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 124 | * Rich 2D GPU-accelerated APIs |
| 125 | * Reactive framework |
| 126 | * Animation/motion APIs |
| 127 | * Material Design and iOS widgets |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 128 | * **Fluid coding experience** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 129 | * Sub-second, stateful hot reload |
| 130 | * IntelliJ: refactor, code completion, etc |
| 131 | * Dart language and core libs |
| 132 | * Package manager |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 133 | * **Full-featured apps** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 134 | * Interop with mobile OS APIs & SDKs |
| 135 | * Gradle/Java/Kotlin |
| 136 | * Cocoapods/ObjC/Swift |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 137 | |
| 138 | ### Optimize |
| 139 | |
| 140 | * **Test** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 141 | * Unit testing |
| 142 | * Integration testing |
| 143 | * On-device testing |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 144 | * **Debug** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 145 | * IDE debugger |
| 146 | * Web-based debugger |
| 147 | * async/await aware |
| 148 | * Expression evaluator |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 149 | * **Profile** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 150 | * Timeline |
| 151 | * CPU and memory |
| 152 | * In-app perf charts |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 153 | |
| 154 | ### Deploy |
| 155 | |
| 156 | * **Compile** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 157 | * Native ARM code |
| 158 | * Dead code elimination |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 159 | * **Distribution** |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 160 | * App Store |
| 161 | * Play Store |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 162 | |
| 163 | Learn more about what makes Flutter special in the |
| 164 | <a href="https://flutter.io/technical-overview/">technical overview</a>. |
Nicholas Rebhun | ab56c63 | 2018-03-16 00:29:49 -0700 | [diff] [blame] | 165 | |
Adam Barth | c887878 | 2016-10-31 21:53:27 -0700 | [diff] [blame] | 166 | 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] | 167 | [flutter-dev@googlegroups.com](https://groups.google.com/forum/#!forum/flutter-dev). |
Filip Hracek | 53e2353 | 2017-07-12 10:12:25 -0700 | [diff] [blame] | 168 | |
| 169 | [flutter.io]: https://flutter.io/ |