A Tour of Flutter.io Flutter Meetup Osaka #1 23 June 2018 Ryuji Iwata Okayama, Japan

Ryuji Iwata Google+ +RyujiIwata (https://plus.google.com/+RyujiIwata) Twitter @qt_luigi (http://twitter.com/qt_luigi) 2

Flutter JP (Google+ Community) plus.google.com/communities/101822628763858843669 (https://plus.google.com/communities/101822628763858843669) 3

Flutter Japan User Group (connpass.com) utter-jp.connpass.com/ (https:// utter-jp.connpass.com/) 4

本資料について 公式サイト「Flutter.io 」の見出し項目を日本語化（翻訳や意訳）して補足説明を加えた形に なっています。 タイトルの通り、はじめのうちに広大な公式サイト「Flutter.io 」を効率良く巡るための「ガ イドブック」としての役割が果たせたら幸いです。 Happy Fluttering! 5

Flutter.io 6

特徴 読みやすい 英語だが、文法や単語がシンプル。 同じ言い回しが多いので、読めば読むほどに。 理解しやすい 文章だけでなくコードや図が豊富。 説明していることがわかりやすい。 直しやすい ページの右上に"Edit Source" と"File issue" のリンクが常設。 クリックすると該当のGitHub ページへ遷移。 7

トップページ 8

ヘッダー 主要コンテンツへのリンク ドキュメント、ショーケース、GitHub 、パッケージ、サポート サイト内の検索欄 Google カスタムサーチを使用。 9

ヘッダー（ショーケース） 各企業が作成したFlutter アプリを紹介。 10

ヘッドライン トップニュースおよび関連記事へのリンク。 最近はリリース情報の場合が多い。 Jun 20 ：Announcing Flutter Release Preview 1 medium.com/ utter-io/ utter-release-preview-1-943a9b6ee65a (https://medium.com/ utter-io/ utter-release-preview-1- 943a9b6ee65a) May 7 ：Ready for Production Apps: Flutter Beta 3 developers.googleblog.com/2018/05/ready-for-production-apps- utter-beta-3.html (https://developers.googleblog.com/2018/05/ready-for-production-apps- utter-beta-3.html) Apr 10 ：Announcing Flutter beta 2 medium.com/ utter-io/https-medium-com- utter-io-announcing- utters-beta-2- c85ba1557d5e (https://medium.com/ utter-io/https-medium-com- utter-io-announcing- utters-beta-2-c85ba1557d5e) 11

フッター（関連リンク） メーリングリスト（ utter-dev@ ） twitter （@ utterio ） github （github.com/ utter/ ） 利用規約 プライバシーポリシー 社区中文资源（中国用サイト） 12

フッター（ライセンス情報） サイトコンテンツ Creative Commons Attribution 4.0 International License (CC BY 4.0) コードサンプル BSD License 13

[ 参考] Flutter 資産のライセンス ロゴ画像、など Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA 4.0) github.com/ utter/identity-assets (https://github.com/ utter/identity-assets) 例）ロゴ画像を加工してイベントサイトに使用する、など 14

ボディ Flutter の特徴が紹介されている。 美しいネイティブモバイルアプリを構築 高速開発（ホットリロード） 表現力が豊かで美しいUI （マテリアルデザイン） モダンなリアクティブフレームワーク ネイティブの機能とSDK にアクセス可能 統合アプリケーション開発 始めるのは簡単、今日から試そう。 15

主要コンテンツ 16

ここでの「主要コンテンツ」とは？ 公式サイト「Flutter.io 」のトップページ以外に表示される左側の項目一覧です。 17

基本的には「上から下へ」 Get started Flutter を始める時に。 Build UIs ユーザーインターフェースを開発する時に。 Use device and SDK APIs パッケージやプラグインを使ったりそれ自身を開発する時に。 Development and tools より効率的に開発を進めて行く時に。 More details Flutter 本体を知りたい時に。 18

Get started Flutter を始める時に。 1: Flutter のインストール（Windows, macOS, Linux ） 2: エディターの設定（Android Studio, Visual Studio Code ） 3: 雛形アプリで動作確認 4: 最初のアプリを書いてみる 5: 次に学ぶこと 19

Build UIs (1/3) ユーザーインターフェースを開発する時に。 ウィジェット ウィジェットの解説 ウィジェットのカタログ サンプル集 クックブック サンプルアプリのカタログ コードラボ 20

Build UIs (2/3) チュートリアル レイアウト構造 インタラクティブ機能 各デベロッパー向け Web Android iOS React Native 21

Build UIs (3/3) ジェスチャー アニメーション ボックスの制約 アセット（リソース）と画像 国際化対応（表示言語） アクセサビリティ 22

Use device and SDK APIs パッケージやプラグインを使ったりそれ自身を開発する時に。 パッケージの使い方 パッケージやプラグインの開発 各OS 機能にアクセス JSON と永続化（情報やデータの保存） 23

Development and tools (1/2) より効率的に開発を進めて行く時に。 IDE の使い方 ホットリロードの使い方 アプリのテスト方法 アプリのデバッグ方法 パフォーマンス測定 ウィジェット構造を観察する方法 24

Development and tools (2/2) Android アプリのリリース準備 iOS アプリのリリース準備 Fastlane を使った継続的開発 Flutter 本体のアップグレード コードフォーマット 25

More details Flutter 本体を知りたい時に。 よくある質問（FAQ ） Flutter の技術概要 スライド Flutter の概要説明 アーキテクチャー図 YouTube フレームワークの層（レイヤー）の設計 レンダリングの流れ（パイプライン） 26

Thank you Ryuji Iwata Okayama, Japan @qt_luigi (http://twitter.com/qt_luigi)