1 of 23

Dart / Flutter 概要

Dart / Flutter入門者向けハンズオン 2018/05/13

​

https://twitter.com/ntaoo

https://twitter.com/sh4869sh

​

​

2 of 23

目次

  1. Dart, Flutterの歴史、経緯
  2. Dartの特徴
  3. Dartの構文
  4. Flutterの概要
  5. Flutterのアーキテクチャ
  6. パッケージ管理システム
  7. 情報源、コミュニティ

3 of 23

Dart / Flutterの歴史、経緯

4 of 23

Dart / Flutterの歴史、経緯

  • 当初はWebにフォーカスした言語
  • 2014〜2015年ごろからWeb以外での適用を模索
  • そのうちのひとつがFlutterとして結実
  • https://slides.com/ntaoo/dart-2#/

​

5 of 23

Dart言語の特徴

JavaかJavaScriptを知っていれば習得が容易な言語

​

  • シンプルさ、一貫性を重視

​

6 of 23

Dart言語の特徴

コンパイラとVMが頑張る言語

  • クライアントサイド
    • 開発中はJITコンパイルして実行
    • リリースはAOTコンパイル
      • ネイティブアプリ（Flutter）
      • Webアプリ（dart2js)
  • コマンドライン、サーバーサイド
    • DartVMで実行

7 of 23

Dart言語の特徴

構文とコアライブラリで非同期処理をサポート

​

  • Future
  • Stream
  • async/await
  • ThreadでなくIsolate
    • (actor basedの並列処理)

8 of 23

Dart言語の特徴

  • Dartanalyzerでの静的解析とIDEサポート
    • 高速な開発サイクル
  • Optional 型システムから型安全性重視の型システムと型推論サポートへ

9 of 23

Dart言語の構文

以下を見ましょう。

多くの馴染み深い構文を採用していることがわかります。

10 of 23

Flutterの概要

  • クロスプラットフォーム開発
  • Hot Reloading
  • Reactive Framework
  • Widget
  • プラグインによるネイティブ機能との通信
  • 開発環境サポート

11 of 23

クロスプラットフォーム開発

From https://flutter.io/

12 of 23

クロスプラットフォーム開発

13 of 23

クロスプラットフォーム開発

  • iOS, Android対応
  • macOS, Linux, その他のOSのサポートも試験中
  • シングルコードベース
    • すべてをDartで書く
  • 独自Widgetシステム
  • iOS, Android（Material Design)のネイティブUIを模したWidgetを公式に大量に提供

14 of 23

Hot Reloading

15 of 23

Reactive Framework

  • Reactにインスパイア
  • 全てはWidget。Widgetが木構造を構成
  • StatefulWidget, Stateで状態管理。StatelessWidgetで状態管理しないWidgetを作成。
  • 状態を元に、setState()をトリガーにしてでWidget treeのうち状態が更新されている箇所をを再build。
  • ハンズオンで習得を目指します。

16 of 23

プラグインによるネイティブ機能との通信

  • プラグインシステムによりネイティブの機能を利用可能
  • 公式が多くのプラグインを提供している
    • レポジトリ: https://github.com/flutter/plugins
    • カメラ・センサー・バッテリー残量・etc……
  • プラグインを利用すればAndroid・iOSのネイティブのコードを書かずにネイティブ機能を利用可能
  • プラグイン自体の自作も可能

17 of 23

High-level overview

Skia

Dart

Text

Foundation

Animation

Painting

Rendering

Widgets

Material

Gestures

Engine

(C++)

Framework

(Dart)

Cupertino

18 of 23

開発環境サポート

  • Android Studio
  • Intelij Idea
  • VS Code
  • (Emacs, Vim, Atom…)

​

​

19 of 23

パッケージ管理システム

  • Pub package manager
  • https://pub.dartlang.org/
  • ユニバーサルに使えるコアなライブラリもあれば、特定のプラットフォーム（Flutter, Web)でのみ使えるパッケージも存在

​

20 of 23

ハンズオンでの目標

以下の項目を理解し、実際に操作できるようになること

  • Flutterプロジェクトの作成方法
  • 基本的なレイアウトシステム
  • 基本的なインタラクション
  • HTTP通信
  • プラグイン、パッケージの利用方法

21 of 23

ハンズオンでも範囲外とすること

  • ジェスチャーシステムの詳細
  • アニメーションシステムの詳細
  • テスト
  • デバッギング、インスペクションの詳細
  • ネイティブ機能との通信の詳細
  • 個別のWidgetの詳細
  • Model (MVVM, Flux, etc…)
  • ストアへの公開方法

22 of 23

情報源

https://flutter.io/

https://github.com/flutter/flutter/tree/master/examples

https://github.com/Solido/awesome-flutter

https://twitter.com/flutterio?lang=en

他、盛り上がってきているのでブログ記事多数（ただしほとんど英語）

23 of 23

コミュニティ

​