170 lines
6.4 KiB
Markdown
170 lines
6.4 KiB
Markdown
# <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)
|
|
|
|
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.
|
|
|
|
### Documentation
|
|
|
|
* **Main site: [flutter.io][]**
|
|
* [Install](https://flutter.io/setup/)
|
|
* [Get started](https://flutter.io/getting-started/)
|
|
* [Contribute](CONTRIBUTING.md)
|
|
|
|
## Fast development
|
|
|
|
Flutter's <em>hot reload</em> helps you quickly
|
|
and easily experiment, build UIs, add features, and fix
|
|
bugs faster. Experience sub-second reload times,
|
|
without losing state, on
|
|
emulators, simulators, and hardware for iOS
|
|
and Android.
|
|
|
|
<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.">
|
|
|
|
## Expressive, beautiful UIs
|
|
|
|
Delight your users with Flutter's built-in
|
|
beautiful Material Design and
|
|
Cupertino (iOS-flavor) widgets, rich motion APIs,
|
|
smooth natural scrolling, and platform awareness.
|
|
|
|
[<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)
|
|
[<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)
|
|
|
|
[<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)
|
|
[<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)
|
|
|
|
Browse the <a href="https://flutter.io/widgets/">widget catalog</a>.
|
|
|
|
## Modern, reactive framework
|
|
|
|
Easily compose your UI with Flutter's
|
|
modern functional-reactive framework and
|
|
rich set of platform, layout, and foundation widgets.
|
|
Solve your tough UI challenges with
|
|
powerful and flexible APIs for 2D, animation, gestures,
|
|
effects, and more.
|
|
|
|
```dart
|
|
class CounterState extends State<Counter> {
|
|
int counter = 0;
|
|
|
|
void increment() {
|
|
// Tells the Flutter framework that state has changed,
|
|
// so the framework can run build() and update the display.
|
|
setState(() {
|
|
counter++;
|
|
});
|
|
}
|
|
|
|
Widget build(BuildContext context) {
|
|
// This method is rerun every time setState is called.
|
|
// The Flutter framework has been optimized to make rerunning
|
|
// build methods fast, so that you can just rebuild anything that
|
|
// needs updating rather than having to individually change
|
|
// instances of widgets.
|
|
return new Row(
|
|
children: <Widget>[
|
|
new RaisedButton(
|
|
onPressed: increment,
|
|
child: new Text('Increment'),
|
|
),
|
|
new Text('Count: $counter'),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Browse the <a href="https://flutter.io/widgets/">widget catalog</a>
|
|
and learn more about the
|
|
<a href="https://flutter.io/widgets-intro/">functional-reactive framework</a>.
|
|
|
|
## Access native features and SDKs
|
|
|
|
Make your app come to life
|
|
with platform APIs, 3rd party SDKs,
|
|
and native code.
|
|
Flutter lets you reuse your existing Java/Kotlin and ObjC/Swift code,
|
|
and access native features and SDKs on Android and iOS.
|
|
|
|
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>:
|
|
|
|
```dart
|
|
Future<Null> getBatteryLevel() async {
|
|
var batteryLevel = 'unknown';
|
|
try {
|
|
int result = await methodChannel.invokeMethod('getBatteryLevel');
|
|
batteryLevel = 'Battery level: $result%';
|
|
} on PlatformException {
|
|
batteryLevel = 'Failed to get battery level.';
|
|
}
|
|
setState(() {
|
|
_batteryLevel = batteryLevel;
|
|
});
|
|
}
|
|
```
|
|
|
|
Learn how to use <a href="https://flutter.io/using-packages/">packages</a>, or
|
|
write <a href="https://flutter.io/platform-channels/">platform channels</a>,
|
|
to access native code, APIs, and SDKs.
|
|
|
|
## Unified app development
|
|
|
|
Flutter has the tools and libraries to help you easily
|
|
bring your ideas to life on iOS and Android.
|
|
If you don't have any mobile development experience, Flutter
|
|
is an easy and fast way to build beautiful mobile apps.
|
|
If you are an experienced iOS or Android developer,
|
|
you can use Flutter for your views and leverage much of your
|
|
existing Java/Kotlin/ObjC/Swift investment.
|
|
|
|
### Build
|
|
|
|
* **Beautiful app UIs**
|
|
* Rich 2D GPU-accelerated APIs
|
|
* Reactive framework
|
|
* Animation/motion APIs
|
|
* Material Design and iOS widgets
|
|
* **Fluid coding experience**
|
|
* Sub-second, stateful hot reload
|
|
* IntelliJ: refactor, code completion, etc
|
|
* Dart language and core libs
|
|
* Package manager
|
|
* **Full-featured apps**
|
|
* Interop with mobile OS APIs & SDKs
|
|
* Gradle/Java/Kotlin
|
|
* Cocoapods/ObjC/Swift
|
|
|
|
### Optimize
|
|
|
|
* **Test**
|
|
* Unit testing
|
|
* Integration testing
|
|
* On-device testing
|
|
* **Debug**
|
|
* IDE debugger
|
|
* Web-based debugger
|
|
* async/await aware
|
|
* Expression evaluator
|
|
* **Profile**
|
|
* Timeline
|
|
* CPU and memory
|
|
* In-app perf charts
|
|
|
|
### Deploy
|
|
|
|
* **Compile**
|
|
* Native ARM code
|
|
* Dead code elimination
|
|
* **Distribution**
|
|
* App Store
|
|
* Play Store
|
|
|
|
Learn more about what makes Flutter special in the
|
|
<a href="https://flutter.io/technical-overview/">technical overview</a>.
|
|
|
|
Join us in our [Gitter chat room](https://gitter.im/flutter/flutter) or join our public mailing list,
|
|
[flutter-dev@googlegroups.com](https://groups.google.com/forum/#!forum/flutter-dev).
|
|
|
|
[flutter.io]: https://flutter.io/
|