Flutter betaリリース後からの動き

[前回の記事](https://qiita.com/Ryuichirou/items/029b5312e73374187fa3)で「そろそろBetaに移行する模様」と書いたところ、その直後にBetaになりました。個人的に気になって目が離せない存在になってしまったので、その後の動きをまとめます。

公式アナウンス
----------------------------------

* [Google Developers Blog: Announcing Flutter beta 1: Build beautiful native apps](https://developers.googleblog.com/2018/02/announcing-flutter-beta-1.html)

> Today, as part of Mobile World Congress 2018, we are excited to announce the first beta release of Flutter. Flutter is Google's new mobile UI framework that helps developers craft high-quality native interfaces for both iOS and Android.

大きくアナウンスされている点は次の4つ。

0. Betaチャンネルのリリース
1. 開発環境の充実
2. Dart 2 (pre-release)
3. Packages
4. Community

Betaチャンネルのリリース
--------------

* [Flutter build release channels · flutter/flutter Wiki](https://github.com/flutter/flutter/wiki/Flutter-build-release-channels)

> Every few weeks, we pick the "best" dev build of the previous month or so, and promote it to beta. These builds have been tested with our codelabs.

今までの`master`, `alpha`から`master`, `dev`, `beta`の3チャンネルに。利用するチャンネルの変更は次のコマンドで可能。

```
$ flutter channel [<channel-name>]
```

開発環境の充実
--------------

開発環境は次の2つが利用可能。

1. Android Studio, IntelliJ IDEA
2. Visual Studio Code

なお[dart-atom/atom-flutter: An Atom plugin for Flutter developers](https://github.com/dart-atom/atom-flutter)もあるけれどアクティブじゃない様子。

### Android Studio, IntelliJ IDEA

[Flutter :: JetBrains Plugin Repository](https://plugins.jetbrains.com/plugin/9212-flutter)

> Support for developing Flutter applications. Flutter gives developers an easy and productive way to build and deploy cross-platform, high-performance mobile apps on both Android and iOS.

使える人には使いやすい(使いこなせるとは言っていない)多機能IDE。[Flutter Widget Inspector](https://flutter.io/inspector/)が使えるのはこちら。

### Visual Studio Code

[Dart-Code/Dart-Code: Dart, Flutter and Fuchsia support for Visual Studio Code (VSCode).](https://github.com/Dart-Code/Dart-Code)

> Dart Code extends VS Code with support for the Dart programming language, and provides tools for effectively editing, refactoring, running, and reloading Flutter mobile apps, and AngularDart web apps.

それなりの使い方がすぐにできる、ぱっと使いやすいエディタ。[Dart Code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)を利用するとデバッグとか色々捗るようになる。同時に複数機器に繋いで開発する(例えば、iOSシミュレーターとAndroidシミュレーターを同時にHot Reload)場合はどうすればいいんだろう…？

Dart 2
--------------

[Trying the preview of Dart 2 in Flutter · flutter/flutter Wiki](https://github.com/flutter/flutter/wiki/Trying-the-preview-of-Dart-2-in-Flutter)

> Dart 2 is an update to the Dart programming language that introduces:
> * Strong compile-time type checks
> * Optional new/const keyword when calling a constructor (e.g., change child: new Text('Hi') to child: Text('Hi'))
> * Various smaller language changes

最新のflutterを利用すると、Dart2が利用できる。有効にするためには、IDE(Android Studio, IntelliJ IDEA, VSCode)の設定変更が必要。

> Changes that may break Flutter apps and packages have, and will continue to, be communicated to the flutter-dev Google Group as breaking changes.

ただし、Dart2は破壊的な変更が加えられているため、ライブラリや自分の書いたソースコードが動かなくなる場合がある。そのときにはflutter-devに報告してほしいとのこと。

Packages
--------------

[Flutter Packages](https://pub.dartlang.org/flutter)

> Flutter↗ makes it easy and fast to build beautiful mobile apps for iOS and Android.

Flutterで利用できるパッケージを検索できるサイト。UI系のパッケージは充実しているけれど色々捗りそうなものも多い。個人的に気になったものは次のあたり。

### [share](https://pub.dartlang.org/packages/share)

> A Flutter plugin to share content from your Flutter app via the platform's share dialog. Wraps the ACTION_SEND Intent on Android and UIActivityViewController on iOS.

使い方はこんな感じ。

```dart
new RaisedButton(
    child: const Text('Share'),
    onPressed: text.isNotEmpty
        ? () {
            share(text); // <- this
        }
        : null,
),
```

### [shared_preferences](https://pub.dartlang.org/packages/shared_preferences)

> Wraps NSUserDefaults (on iOS) and SharedPreferences (on Android), providing a persistent store for simple data. Data is persisted to disk automatically and asynchronously.

モバイル端末のローカルにデータを気軽に永続化するためのもの。使い方はこんな感じ。

```dart
void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      body: new Center(
      child: new RaisedButton(
        onPressed: _incrementCounter,
        child: new Text('Increment Counter'),
        ),
      ),
    ),
  ));
}

_incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  prefs.setInt('counter', counter);
}
```

### [font_awesome](https://pub.dartlang.org/packages/font_awesome)

> This library contains a dart package useful to develop web-applications using fontawesome icons

[Font Awesome](https://fontawesome.com/)を利用しやすくするパッケージ。使い方はまだよくわかっていない…。

### [flutter_charts](https://pub.dartlang.org/packages/flutter_charts)

> Flutter Charts is a charting library for Flutter, written in Flutter. Currently, column chart and line chart are supported.

使い方はこんな感じ。Chart.jsとかD3, C3あたりを見慣れているとまだ違和感があるかな…。

```dart
void defineOptionsAndData() {
  _lineChartOptions = new LineChartOptions();
  _verticalBarChartOptions = new VerticalBarChartOptions();
  _chartData = new RandomChartData(useUserProvidedYLabels: _lineChartOptions.useUserProvidedYLabels);
}
```

### [grpc](https://pub.dartlang.org/packages/grpc)

> The Dart implementation of gRPC: A high performance, open source, general RPC framework that puts mobile and HTTP/2 first.

Protocol Buffersを使えるようにするライブラリ。使い方は[grpc-dart/example/route_guide at master · grpc/grpc-dart](https://github.com/grpc/grpc-dart/tree/master/example/route_guide)。

### [graphql_client](https://pub.dartlang.org/packages/graphql_client)

> GraphQL Client written in Dart 🎯.

GraphQLクライアント。

### [rxdart | Dart Package](https://pub.dartlang.org/packages/rxdart)

> RxDart is a reactive functional programming library for Google Dart, based on ReactiveX.

Rxパッケージ。

### [sensors](https://pub.dartlang.org/packages/sensors#-readme-tab-)

> A Flutter plugin to access the accelerometer and gyroscope sensors.

加速度センサーとジャイロセンサーへのアクセスを提供するライブラリ。使い方はReactiveな感じ。

```dart
void initState() {
    super.initState();
    _streamSubscriptions
        .add(accelerometerEvents.listen((AccelerometerEvent event) {
      setState(() {
        _accelerometerValues = <double>[event.x, event.y, event.z];
      });
    }));
    _streamSubscriptions.add(gyroscopeEvents.listen((GyroscopeEvent event) {
      setState(() {
        _gyroscopeValues = <double>[event.x, event.y, event.z];
      });
    }));
}
void dispose() {
    super.dispose();
    for (StreamSubscription<dynamic> subscription in _streamSubscriptions) {
      subscription.cancel();
    }
}
```

### [flutter_blue](https://pub.dartlang.org/packages/flutter_blue)

> FlutterBlue is a bluetooth plugin for Flutter, a new mobile SDK to help developers build modern apps for iOS and Android.

クロスプラットフォームBLEパッケージ。先程同様にReactiveな感じで記述できる。使い方は[Example](https://pub.dartlang.org/packages/flutter_blue#-example-tab-)にある(長いので転記はしない)。

### [graphs](https://pub.dartlang.org/packages/graphs)

> Graph algorithms which do not specify a particular approach for representing a Graph.

HashMapのような機能を提供するらしい？

Community
--------------

Flutterの利用方法を紹介するサイトが様々にできてきている。

1. [Flutter Institute](https://flutter.institute/)
2. [Start Flutter](https://startflutter.com/)
3. [Flutter Rocks](https://flutter.rocks/)

### [Flutter Institute](https://flutter.institute/)

> Tutorials and ramblings about flutter.io

色々なFlutterの利用方法がコード付きで紹介されている。例えば、[Simple JSON with Flutter](https://flutter.institute/simple-json-with-flutter/)では次のようなFlutter(というかDart)でのJSONのシリアライズ/デシリアライズの方法が紹介されている。

```dart
import 'dart:convert';

Map decodedMap = JSON.decode('{"framework":"Flutter", "awesome":true}');
// decodedMap['framework'] == 'Flutter'
// decodedMap['awesome'] == true

var data = JSON.encode({
    'framework': "Flutter",
    'tags': ['flutter', 'snippets'],
    'versions': '0.0.20',
    'task': 13511,
});
// data == '{"framework":"Flutter","tags":["flutter","snippets"],"versions":"0.0.20","task":13511}'
```

他にも、[Creating your first flutter app - Part 1](https://flutter.institute/creating-your-first-flutter-app/)で紹介されている、`flutter`コマンドで生成するAndroidのプロジェクトはJavaだけではなくKotlinも、iOSのプロジェクトではObjective-CだけではなくSwiftも選択できること意外だった。

```bash
flutter create --org institute.flutter -i swift -a kotlin --description 'An Octal Clock implementation' octal_clock_app
```

他にも様々なコンテンツが生み出されているところで面白い。

### [Start Flutter](https://startflutter.com/)

Githubに公開されているFlutterのプロジェクトをGifアニメ付きで紹介しているサイト。UIの実装方法を参考にしたいときには役立つかも。右上に[Flutter Market - Google Flutter Apps & Components](https://fluttermarket.com/)というのがあってどうやら実装したものを購入できるらしいんだけど一つだけしか売られていない。これは一体…？

### [Flutter Rocks · Flutter Rocks](https://flutter.rocks/)

> A blog about the joys of Flutter.

ここまでの中ではFlutterについて最も技術的に詳細に触れているサイト。どうやら[Flutter at Codemate](https://flutter.rocks/2017/09/17/flutter-at-codemate/)を見る限り、実際にFlutterを使って開発している様子。

これまで紹介してきたサイトでは「パッケージの使い方」や`Hello, world`に注力して使い方をシンプルに見せることを主眼としていたけれど、結構実践的な印象。

[From Wireframes to Flutter #1 - Movie Details Page · Flutter Rocks](https://flutter.rocks/2017/09/12/from-wireframes-to-flutter-movie-details-page/)や[From Wireframes to Flutter #2 - Artist details page with a blurred background · Flutter Rocks](https://flutter.rocks/2018/03/06/from-wireframes-to-flutter-blurry-artist-details-page/)あたりは実際にUIを作るときに参考になりそう。

[Validating forms in Flutter · Flutter Rocks](https://flutter.rocks/2017/10/17/validating-forms-in-flutter/)ではフォームを作るときの実装について、それがFlutterだといかに簡単にできるかを紹介している。

また、[Separating build environments in Flutter apps, part #1 - environment-specific configuration in Dart side · Flutter Rocks](https://flutter.rocks/2018/03/02/separating-build-environments-part-one/)では「開発環境とプロダクション環境で環境変数を分けたいんだけどどうすりゃいいの？」というまた開発中によく見ることになりそうな疑問に答えてくれる。

### Flutter Weekly

> A weekly newsletter for flutter fans by flutter fans.

Flutterに関するニュースを送ってくれるメールマガジン。なぜかは分からないけれど、Flutterの人気が加速しているらしく結構な量の記事が毎週生産されている。

* [Flutter Weekly](https://us17.campaign-archive.com/home/?u=c8d8d18b6e2c6316ddc1d48a0&id=47548a283b)
* [Flutter Weekly #1](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=b2f62ad31d)
* [Flutter Weekly #2](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=64b5dabf31)
* [Flutter Weekly #3](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=b9c2da9caf)
* [Flutter Weekly #4](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=6632ea0b5a)
* [Flutter Weekly #5](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=a6650e43f1)
* [Flutter Weekly #6](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=1bc4c7d6f1)
* [Flutter Weekly #7](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=3cd96f701b)
* [Flutter Weekly #8](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=42623a4d3a)
* [Flutter Weekly #9](https://us17.campaign-archive.com/?u=c8d8d18b6e2c6316ddc1d48a0&id=2142f98ea2)

#### 気になった記事

今までのメールマガジンをざっと眺めてみて気になった記事。

* [Implementing adaptive master-detail layouts in Flutter · Flutter Rocks](https://flutter.rocks/2018/01/28/implementing-adaptive-master-detail-layouts/)
    - Master - Detail型のUIの実装方法について
* [Flutter: Setting up a Navigation Drawer with Multiple Fragments (Widgets)](https://medium.com/@kashifmin/flutter-setting-up-a-navigation-drawer-with-multiple-fragments-widgets-1914fda3c8a8)
    - [ナビゲーションドロワー](https://developer.android.com/training/implementing-navigation/nav-drawer.html)をFlutterで実装する例
* ["Ok Google, use my Flutter app!" | Szałko-Blog](https://marcinszalek.pl/flutter/ok-google-flutter/)
    - Flutterで作ったアプリをGoogleアシスタントから呼び出す方法について
* [Flutter: Login App using REST API and SQFLite – Kashif Minhaj – Medium](https://medium.com/@kashifmin/flutter-login-app-using-rest-api-and-sqflite-b4815aed2149)
    - MVPパターンでログイン画面を実装してみた例、UIだけじゃなくて設計の話に入っていく記事が出てきた
* [Flutter, Redux and Firebase Cloud Firestore — in sync](https://medium.com/shift-studio/flutter-redux-and-firebase-cloud-firestore-in-sync-2c1accabdac4)
    - 当たり前のように出てくるReduxによる実装
* [Test Flutter apps on Travis – Flutter – Medium](https://medium.com/flutter-io/test-flutter-apps-on-travis-3fd5142ecd8c)
    - [Flutterのテスト](https://flutter.io/testing/)をTravisで回す方法

### チュートリアル

#### 公式

* [Write Your First Flutter App - Flutter](https://flutter.io/get-started/codelab/)
    - Flutter公式のチュートリアル。改めて見てみると一通りの基礎が分かるようになっている。

#### WEIGHTTRACKER from SZALKO-BLOG 

シンプルな実装から入って気がついたらReduxで状態管理したりグラフを自前で実装したりしてる。

* [Flutter ListView Tutorial - WeightTracker 1 | Szałko-Blog](https://marcinszalek.pl/flutter/flutter-listview/)
* [Creating full-screen dialog in Flutter - WeightTracker 2 | Szałko-Blog](https://marcinszalek.pl/flutter/flutter-fullscreendialog-tutorial-weighttracker-ii/)
* [Firebase Database in Flutter - WeightTracker 3 | Szałko-Blog](https://marcinszalek.pl/flutter/firebase-database-flutter-weighttracker/)
* [Reduxing Flutter Firebase App - WeightTracker 4 | Szałko-Blog](https://marcinszalek.pl/flutter/reduxing-flutter/)
* [Flutter TabBar Example - WeightTracker 5 | Szałko-Blog](https://marcinszalek.pl/flutter/flutter-tabbar-example-weighttracker-5/)
* [Line Chart in Flutter - WeightTracker 6 | Szałko-Blog](https://marcinszalek.pl/flutter/line-chart-flutter/)
* [Deleting entry and undoing deletion in snackbar - Flutter - WeightTracker 7 | Szałko-Blog](https://marcinszalek.pl/flutter/deleting-entry-with-undo/)

#### Flutter: How I built a simple app in under an hour from scratch. And how you can do it too.

Google Play BooksのAPIを使って、本棚アプリを作る例

* [Flutter: How I built a simple app in under an hour from scratch. And how you can do it too.](https://proandroiddev.com/flutter-how-i-built-a-simple-app-in-under-an-hour-from-scratch-and-how-you-can-do-it-too-6d8e7fe6c91b)
* [Flutter: Bookshelf App Part 2, Personal Notes and Database Integration](https://proandroiddev.com/flutter-bookshelf-app-part-2-personal-notes-and-database-integration-a3b47a84c57)
* [Flutter Bookshelf App Part 3: Managing data the right way.](https://proandroiddev.com/flutter-bookshelf-app-part-3-managing-data-the-right-way-30569abf9487)

動画
-------------------------------------------

### DartConf

* [Dart Conference 2018](https://www.youtube.com/playlist?list=PLOU2XLYxmsIIJr3vjxggY7yGcGO7i9BK5)

Google主催のDartConfの動画。Flutterに関するものがだいぶ多い。面白かったのは次の2つ。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">このライブコーディング本当に楽しそうで見返してしまう Let&#39;s live code in Flutter (DartConf 2018) <a href="https://t.co/UDNjM0qH3R">https://t.co/UDNjM0qH3R</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 龍一郎 (@K_Ryuichirou) <a href="https://twitter.com/K_Ryuichirou/status/974888036528893952?ref_src=twsrc%5Etfw">2018年3月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">redux + flutter_redux Keep it Simple, State: Architecture for Flutter Apps (DartConf 2018) <a href="https://t.co/VjnJIV3SXJ">https://t.co/VjnJIV3SXJ</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 龍一郎 (@K_Ryuichirou) <a href="https://twitter.com/K_Ryuichirou/status/974888977596493824?ref_src=twsrc%5Etfw">2018年3月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### Skills matter

* [Building a Flutter App in an Hour (or Less) | SkillsCast | 1st March 2018](https://skillsmatter.com/skillscasts/11555-building-a-flutter-app-in-an-hour-or-less#video)

Matt Sullivan @ Googleのライブコーディング。VSCode使っている人が動画だと多い。

### 個人で実施しているもの

* [Flutter - YouTube - YouTube](https://www.youtube.com/playlist?list=PLUbFnGajtZlX9ubiLzYz_cw92esraiIBi)

Dartの基本的な構文から解説している。

* [Google's Flutter Tutorials](https://www.youtube.com/playlist?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV)

* [Flutter SDK Tutorials - App Development](https://www.youtube.com/playlist?list=PLxU9Ryxq6p58PsNmJL70J4_7UzfSqf35n)

他で公開されているチュートリアルやサンプルコードの内容を改めて解説している。

### 最後に

軽い気持ちでまとめに手を出してみたらえらいことになってしまった。