1 of 43

Flutterの魔法

Tim Messerschmidt

Regional Lead, Developer Relations

messerschmidt@google.com

@SeraAndroid

Translation by yokmama with google translate

2 of 43

Flutterとは

SDK を使えばモダンで美しいアプリを簡単につくることができます

実行 できる機種はiOSとAndroidの両機種です

これは Googleによって開発されたオープンソースのツールキットです*

100を超えるオープンソースコミュティーが貢献しています

* 現在はまだベータです

3 of 43

Flutterは誰のためのもの？

デザイナーはAndoridとiOSの両方でブランドドリブン開発ができます

試行者は試作品の開発時点で実際の動作にちかく、また高速に作れます

開発者は 素晴らしい開発ツール、容易に学習できる言語、豊富なウィジェット、素晴らしいIDEを使えるといったメリットがあります。Flutterの機能を使うことで、楽しいアプリ開発をすることができます。

4 of 43

  1. 開発者の体験
  2. パフォーマンス

5 of 43

デザイン指向の開発フロー

6 of 43

ここには何が見えますか？

7 of 43

レイアウトの図表

​

  • 行とカラムを探します
  • グリッドある？
  • 重なった要素はあるかな？
  • タブは必要かな？
  • パディング、アライメント、ボーダは必要ない？

8 of 43

ボトムアップ設計

9 of 43

Flutterの中のアナログなHTML/CSS

var container = new Container( // grey box� child: new Text(� "Lorem ipsum",� style: new TextStyle(� fontSize: 24.0� fontWeight: FontWeight.w900,� fontFamily: "Georgia",� ),� ),� width: 320.0,� height: 240.0,� color: Colors.grey[300],�);

<div class="greybox">� Lorem ipsum�</div>�

.greybox {� background-color: #e0e0e0; /* grey 300 */� width: 320px;� height: 240px;� font: 900 24px Georgia;� }

10 of 43

効果的なツールの使い方

11 of 43

$ flutter doctor

Flutter環境を確認し、ターミナルにレポートを表示します

$ flutter upgrade

Flutter SDKとパッケージの両方を更新します

12 of 43

pubspec.yaml

name: flutter_project

description: An amazing Flutter project using Firebase Auth

dependencies:

flutter:

sdk: flutter

firebase_auth: "^0.2.5"

13 of 43

pubspec.yaml

name: flutter_project

description: An amazing Flutter project using Firebase Auth

dependencies:

flutter:

sdk: flutter

firebase_auth: ">=0.1.2 <0.2.6"

14 of 43

$ flutter packages get

Flutterのyamlに書かれたパッケージを取得しインストールします

$ flutter packages upgrade

パッケージで利用可能な最新のパッケージを取得しインストールします

15 of 43

$ flutter format

Flutterのコードスタイルに従ってコードをフォーマットします

$ flutter analyze

コードの文法ミスや簡単なコーディングミスを分析し間違いを発見します

16 of 43

ホットリロード

実行中のDart VMに更新されたソースコードを反映する

ステートフル: アプリケーションの状態はリロード後も保持されます.

深い入れ子になっている画面もすばやく更新されます

17 of 43

18 of 43

Dartの展望

ステートメントレベルにおける、シングルステッピングデバッガとプロファイラ

Flutter runを使用してアプリを起動すると自動的に実行されます

​

実行されたコードの行を見ることができます

メモリ割り当ての状態を確認できます

メモリリークや断片化したメモリをデバッグできます

​

​

19 of 43

ウィジェットの威力

20 of 43

素晴らしい見た目と高速なウィジェット

21 of 43

すべてウィジェットです

22 of 43

グローバルなレイアウトシステムとさよなら

new Center(

child: new Text('Centered Text', style: textStyle),

)

​

ローカルレイアウト: すべてのウイジェットはそれ自信のレイアウトを定義します。親に子がセンターになっているといった事は伝える必要はありません。

​

​

23 of 43

ステートフルウィジェット

vs.

ステートレスウィジェット

24 of 43

ウィジェットのカスタマイズと拡張

Flutterのウィジェットは簡単にカスタマイズできるように設計されています

構成: ウィジェットは小さなウィジェットで構築されており、組み合わせて新しいカスタムウィジェットを作成することができます。

class RaisedButton extends StatelessWidget {

...

}

25 of 43

各層は下の層によって構築されます

Skia

Dart

Text

Foundation

Animation

Painting

Rendering

Widgets

Material

Gestures

Engine

(C++)

Framework

(Dart)

Cupertino

26 of 43

プラットフォームチャンネル

27 of 43

プラットフォームチャンネルを使用すると、ネイティブと相互にメソッドのやり取りができます

28 of 43

例: バッテリーレベルの取得*

class MainActivity() : FlutterActivity() {� private val CHANNEL = "samples.flutter.io/battery"�� override fun onCreate(savedInstanceState: Bundle?) {� super.onCreate(savedInstanceState)� GeneratedPluginRegistrant.registerWith(this)�� MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->� // TODO� }� }�}

* この例はAndroidのKotlinで書かれています

29 of 43

呼び出し時の引数を使う方法*

MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->� if (call.method == "getBatteryLevel") {� val batteryLevel = getBatteryLevel()� if (batteryLevel != -1) {� result.success(batteryLevel)� } else {� result.error("UNAVAILABLE", "Battery level not available.", null)� }� } else {� result.notImplemented()� }�}

* この例はAndroidのKotlinで書かれています

30 of 43

Flutter側からネイティブのメソッドを使う方法

String _batteryLevel = 'Unknown battery level.';

Future<Null> _getBatteryLevel() async {

String batteryLevel;

try {

final int result = await platform.invokeMethod('getBatteryLevel');

batteryLevel = 'Battery level at $result % .';

} on PlatformException catch (e) {

batteryLevel = "Failed to get battery level: '${e.message}'.";

}

setState(() {

_batteryLevel = batteryLevel;

});

}

31 of 43

パフォーマンスのための最適化

32 of 43

  • ネイティブコードにコンパイルする
  • OEMのウィジェットに依存しない
  • ブリッジが不要
  • 構造をみて再描画

33 of 43

Webのリアクションフレーム

Compare

Update

Real

DOM

Virtual DOM

Application

Platform

Rende

r

Canvas

Events

34 of 43

モバイルのリアクションフレーム

Compare

Update

Platform

Widgets

Virtual

Widgets

Application

Platform

Rende

r

Canvas

Events

35 of 43

Flutterを使うと

Widget

Tree

Rende

r

Canvas

Events

Application

Platform

36 of 43

Dartによる高速演算

37 of 43

  • Sound Type System
  • Tree Shaking
  • 豊富なコアライブラリ
  • マルチジェネ、ロックレスGC

38 of 43

  • AndroidとiOSで一つのソースコード
  • 開発サイクルが速い
  • 素晴らしいツールキット

39 of 43

“Flutterで作成されたUIは60fpsで動作し、他のクロスプラットフォーム開発にのフレームワークで作成されたアプリよりはるかに優れています”

code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270

40 of 43

“DartとFlutterを使ったコーディングは、私がモバイルデベロッパを初めたときの喜びを再現しました、いいえ B.S.”

traversoft.com/blog/2017/08/08/conference-app-flutter

41 of 43

"UIはバターのように滑らか (リリースビルドの場合), 私はこんなに滑らかなAndroidアプリを知りません。"

Pascal Welsch, Speaker at Droidcon Berlin

42 of 43

その他の資料

ブログ: WmLelerによるFlutterについて革新的なことについて: goo.gl/bZcFR9

動画: Adam BarthによるFlutterのレンダリングパイプラインについて: youtu.be/UUfXWzp0-DU

動画: Ian Hicksonによる、マホガニーの階段: youtu.be/dkyY9WCGMi0

​

もちろんこれも: github.com/flutter & flutter.io

43 of 43

ありがとう！

Tim Messerschmidt

Regional Lead, Developer Relations

messerschmidt@google.com

@SeraAndroid

Translated by yokmama with google translate.