Flutter Handson Preparation

(1)

Page 1/20

DevFest Kyoto 2017

2017-11-04 (14:00-16:00)

Flutter ハンズオン

事前準備について

(2)

Page 2/20

予め、Flutter のサイトで Get started 節を確認して

1〜3の実施と、できれば 4 に目を通しておいてください。 1. Flutter SDK のインストール

Flutter > Get started > Install https://flutter.io/setup/

2. Flutter SDK のインストール確認 (SDK setup確認) Flutter > Get started > Create and run your first apphttps://flutter.io/getting-started/

3. IntelliJ IDE のインストールと設定

Flutter > Get started > Setting up InteliJ https://flutter.io/intellij-setup/

(3)

Page 3/20

4. Dart言語の基礎学習

Flutter > Get started > Bootstrap into Dart https://flutter.io/bootstrap-into-dart/

上記の全項目でなくても良いので、

Dart入門のコードラボに目をお通しください。

Dart LANGUAGE Toure(Dart言語入門編)を

斜め読みすると更によいでしょう。

Dart入門のコードラボ

Intro to Dart for Java Developers Codelab

https://codelabs.developers.google.com/codelabs/from-java-to-dart/index.html

(4)

Page 4/20

アクセス指定がなく、'_'プレフィックスでprivateを表す引数を連想配列で渡すことができる

dartFormat() パッケージでコード書式を直してくれる Java8の stream のように、map(Fanction) や

forEach(Funcion)が使える

async / await で非同期コードを同期のように記述元型を返すメソドを設けなくてもメソッドチェーンを ..Method で記述できる Method Cascades

参照変数が null の場合の対処を指定する null区別演算子がある Null-Aware Operators

(5)

Page 5/20

Dart LANGUAGE Toure (Dart言語入門編) Language tour

https://www.dartlang.org/guides/language/language-tour

(6)

Page 6/20

Flutter SDK のインストール

インストール要件

MacOS、Windows 7/8/10、Linux の 64-bit版 600 MB以上の空きDisk領域

必須コマンドラインツール (flutter コマンドで利用) bash, mkdir, rm, git, curl, unzip, which

(7)

Page 7/20

Flutter SDK のインストール

プラットフォームOSごとの詳細は、以下を参照ください。

Flutter Setup for macOS

https://flutter.io/setup-macos/ Flutter Setup for Windows

https://flutter.io/setup-windows/ Flutter Setup for Linux

https://flutter.io/setup-linux/

(8)

Page 8/20

Flutter SDK のインストール

1. ネイティブアプリのビルド環境（概説）

アプリをネイティブアプリにコンパイルするため、 Andoid や iOS ネイティブアプリのビルド環境が必要になります。

JDK や Android Studio と Xcode(7.2以上)のインストールについては、ツール提供元の

正式サイト(ドキュメント)を参照ください。

Android 端末は、API 16(4.1)以上が対象です。

(9)

Page 9/20

Flutter SDK のインストール

Android Studio

https://developer.android.com/studio/index.ht ml?hl=ja

Xcode

https://itunes.apple.com/jp/app/xcode/id4977 99835?mt=12

(10)

Page 10/20

Flutter SDK のインストール

2. Flutter SDK のインストール（概説）

Fluttr SDK のインストールは、Flutter リポジトリから任意の場所にクローンして、パスを通して完了です。 Flutter 開発環境のインストール

$ git clone -b alpha https://github.com/flutter/flutter.git

$ export PATH=`pwd`/flutter/bin:$PATH

# Flutter 開発ツール配置ディレクトリへのパスは、

# export FLUTTER_SDK=<開発環境インストールバス>

# export PATH=$FLUTTER_SDK/bin:$PATH などとして、

# $HOME/.bash.profile に設定すると良いでしょう。

(11)

Page 11/20

Flutter SDK セットアップ確認

Flutter SDK やネイティブ・ビルド環境のセットアップ確認には、flutter doctor コマンドを利用します。

レポートされる項目に、[×]がないかチェックしてください。

# Linux に Flutter SDK、Android SDK、Android Studio を入れ、

# USBで実機(Nexus 5)をつないだ状態での実行例

$ flutter doctor

[✓] Flutter (on Linux, locale ja_JP.UTF-8, channel alpha) • Flutter at /home/rie/bin/flutter/sdk/flutter

• Framework revision 701d534ba9 (7週間前), 2017-09-12 14:01:51 -0700

• Engine revision 31d03de019

• Tools Dart version 1.25.0-dev.11.0

(12)

Page 12/20

[✓] Android toolchain - develop for Android devices (Android SDK 25.0.3)

• Android SDK at /home/rie/bin/android/android-sdk-linux_x86 • Platform android-25, build-tools 25.0.3

• ANDROID_HOME = /home/rie/bin/android/android-sdk-linux_x86 • Java binary at: /home/rie/bin/android-studio/jre/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_112- release-b06)

[✓] Android Studio (version 2.3)

• Android Studio at /home/rie/bin/android-studio

• Java version OpenJDK Runtime Environment (build 1.8.0_112- release-b06)

[✓] IntelliJ IDEA Community Edition (version 2017.2) • Flutter plugin version 17.0

• Dart plugin version 172.3968.27 [✓] Connected devices

• Nexus 5 • 06ddc6f5344bc928 • android-arm • Android 6.0.1 (API 23)

(13)

Page 13/20

Flutter SDK セットアップ確認

適当なディレクトリで flutter create <アプリ名> で、 Flutter アプリのプロジェクト・ディレクトリを作成して、 flutter run コマンドで、アプリ雛形が起動できるか

チェックしてみましょう。

$ cd sample_directory

$ flutter create dummy

# sample_directory の下に dummy デイレクトリ

# (Flutterプロジェクトのデイレクトリ)が生成されます。

## 【補足】プロジェクトには、アプリ雛形が配置済み。

# 　＋ボタンのタッチでカウントアップする雛形です。

(14)

Page 14/20

Flutter SDK セットアップ確認

$ cd dummy

$ flutter run

# プロジェクト・ディレクトリに移動して、

# run コマンドで、エミュレータを起動しているか、

# USBで実機を繋いでいれば、アプリ雛形が起動します。

Flutter アプリの実行は、エミュレータ上でもできますが、

できれば Android(4.1以上) や iPhone 実機の使用を

お勧めします。

(15)

Page 15/20

Flutter SDK セットアップ確認

　アプリ雛形のスナップショット

(16)

Page 16/20

Android 実機へのインストール(概説)

PC と Android 実機をUSBでつないで

アプリをインストールできるようにするには、

以下の手順で開発者モードにする必要があります。

1.

設定アプリ

で端末情報端末情報を開き、ビルド番号ビルド番号を７回連打 2.

設定アプリ

に開発者向けオプション開発者向けオプションが追加される

3. 開発者向けオプション開発者向けオプションで USBデバッグUSBデバッグをON にする Android端末の開発者モードをONにする方法

(17)

Page 17/20

iPhone 実機へのインストール(概説)

1. 開発者登録なしでも制限付きでアプリ開発ができます。 2. Xcode で、Flutterプロジェクトの iosディレクトリを開き

Xcode > Preference > Account > Apple ID から自分の Apple ID で (自動作成の)Team を作り、

iOS Development

iOS Development の証明書を選んで署名する。

一週間有効なiOS開発者証明書を作ります

3. Xcode の Runner > General で Identity の Automatically manage signing

Automatically manage signing にチェックを入れ Bundle Identifier に Apple IDアカウントApple IDアカウント、

Signing の Team に自動作成チーム自動作成チームを設定する。

(18)

Page 18/20

4. iPhone と Mac PCを USBでつなぎ、

Flutter IDE (IntelliJ) で、画面上部メニューバーの実機 iPhone を選択して Run を実行します。

5. iPhone 実機の設定アプリ設定アプリから、

一般 > プロファイルとデバイス管理へ進み、

自分で署名した

iOS開発者証明書

を選択して、信頼する

信頼するをタッチする。

6. 実機 iPhone でアプリが起動できるようになります。実機でアプリを確認する, iOSアプリ作成準備

有料ライセンスなしでの実機インストール全工程解説！

(19)

Page 19/20

Apple IDでの iOS開発者証明書の制限

アプリは、一週間経つと起動できなくなります。

一週間以上使うには、証明書の更新＆再ビルドが必要同手順で、新しいiOS開発者証明書を発行します

古い証明書のために認証が失敗する場合は、

キーチェーンアクセスで、古い証明書を削除してから、ログインのロックとアンロックを繰り返すことで、

証明書情報を更新させると良い？そうです。

　「Code Sign error : Command /usr/bin/codesign failed with exit code 1」を解決しました…

(20)

Page 20/20

IntelliJ IDE のインストールと設定

IntelliJ IDE のインストール（概説）

IntelliJ IDE (CE可)をインストールして、

Flutter Plugin と Dart Plugin をインストールします。こちらに英文ドキュメントの意訳を設けました。

GDG Kyoto Event Blog

Flutter開発のための IntelliJのインストール

http://gdgkyoto.blogspot.jp/2017/10/intellij- flutter.html