README.md 6.13 KB
Newer Older
1 2 3 4
# Flutter ![Flutter logo][]

[![Gitter Channel][]][Gitter badge]
[![Build Status - Cirrus][]][Build status]
5 6 7

# Build beautiful native apps in record time

Shams Zakhour's avatar
Shams Zakhour committed
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's avatar
Adam Barth committed
9

10
### Documentation
Adam Barth's avatar
Adam Barth committed
11

12
**Main site: [flutter.io][]**
Shams Zakhour's avatar
Shams Zakhour committed
13 14
* [Install](https://flutter.io/get-started/install/)
* [Get started](https://flutter.io/get-started/)
15
* [API documentation](https://docs.flutter.io/)
16
* [Changelog](https://github.com/flutter/flutter/wiki/Changelog)
17 18 19 20 21
* [How to contribute](https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md)

For announcements about new releases and breaking changes, follow the
[flutter-announce@googlegroups.com](https://groups.google.com/forum/#!forum/flutter-announce)
mailing list.
Adam Barth's avatar
Adam Barth committed
22

23
## Fast development
Adam Barth's avatar
Adam Barth committed
24

25 26
Flutter's <em>hot reload</em> helps you quickly
and easily experiment, build UIs, add features, and fix
Yun's avatar
Yun committed
27
bugs. Experience sub-second reload times,
28 29 30 31
without losing state, on
emulators, simulators, and hardware for iOS
and Android.

32
<img src="https://raw.githubusercontent.com/flutter/website/master/src/_assets/image/tools/android-studio/hot-reload.gif" alt="Make a change in your code, and your app changes instantly.">
33 34 35 36 37

## Expressive and flexible UI
Quickly ship features with a focus on native end-user experiences.
Layered architecture allows full customization, which results in incredibly
fast rendering and expressive and flexible designs.
38

39 40 41 42 43
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.

44 45
[<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)
[<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)
46

47 48
[<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)
[<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/)
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

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.
79
    return Row(
80
      children: <Widget>[
81
        RaisedButton(
82
          onPressed: increment,
83
          child: Text('Increment'),
84
        ),
85
        Text('Count: $counter'),
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
      ],
    );
  }
}
```

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.
101 102
Flutter lets you reuse your existing Java/Kotlin and ObjC/Swift code,
and access native features and SDKs on Android and iOS.
103 104 105 106

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
107
Future<void> getBatteryLevel() async {
108 109 110 111 112 113 114 115 116 117 118 119 120
  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;
  });
}
```

121 122
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>
123 124 125 126 127 128 129 130 131 132
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
133
existing Java/Kotlin/ObjC/Swift investment.
134 135 136

Learn more about what makes Flutter special in the
<a href="https://flutter.io/technical-overview/">technical overview</a>.
137

138 139
# More resources

Adam Barth's avatar
Adam Barth committed
140
Join us in our [Gitter chat room](https://gitter.im/flutter/flutter) or join our public mailing list,
Adam Barth's avatar
Adam Barth committed
141
[flutter-dev@googlegroups.com](https://groups.google.com/forum/#!forum/flutter-dev).
142

143 144 145 146
# How to contribute

To join the team working on Flutter, see our [contributor guide](CONTRIBUTING.md).

147 148 149 150 151 152
[Build Status - Cirrus]: https://api.cirrus-ci.com/github/flutter/flutter.svg
[Build status]: https://cirrus-ci.com/github/flutter/flutter/master
[flutter.io]: https://flutter.io
[Flutter logo]: https://github.com/dart-lang/site-shared/blob/master/src/_assets/image/flutter/icon/64.png?raw=1
[Gitter Channel]: https://badges.gitter.im/flutter/flutter.svg
[Gitter badge]: https://gitter.im/flutter/flutter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge