表示勉強会資料 Google Developer Group 京都 Flutter memo

(1)

Page 1/28

Flutter覚書

ちょっとした補講

(2)

Page 2/28

Flutter って何？

1. Google 謹製のモバイル・アプリ作成ツール 2. クロス・プラットフォーム対応

１つのソースから、iPhoneとAndroidのネイティブ・アプリが生成できる。

3. GPUを使った高速描画の独自ウィジェットUI ネイティブOSのウィジェット不使用

⇒ OS環境に依存しない共通UIを提供

4. ネイティブOS機能も利用可能（GPSやカメラなど） 5. まだα版

(3)

Page 3/28

6. ターゲットは、2Dアプリ作成（ゲームは対象外） 7. ネイティブ画面との共存は可能だが、

ネイティブ・ウィジェットとの混在は不可参考元

参考元 Flutter

https://flutter.io/

FlutterでAndroid/iOS両対応のアプリ開発

https://speakerdeck.com/najeira/iosliang-dui- ying-falseapurikai-fa-2

(4)

Page 4/28

AppStore と Google Play で公開中のアプリ

クルマ愛好家コミュニティ CARTUNE アメリカンミュージカル HAMILTON

(5)

Page 5/28

Flutter サンプル・プロジェクト

Flutter SDK には、

以下の場所にサンプル・プロジェクトが含まれています。

(Flutter SDK配置ディレクトリ)/flutter/examples/

あるいは Flutter github リポジトリ

flutter/examples/

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

お勧めは、flutter_gallary です。

FlutterでできるUI表現を確認してみてください。

(6)

Page 6/28

Flutter でのコーディング

Flutterでは、プログラミング言語 Dart を使って、 Flutter 提供のクラスを使ってコーディングします。

Flutter ライブラリや Dart 言語がどのようなものかは、下記のコードラボを参照ください。

Building Beautiful UIs with Flutter - Codelab

https://codelabs.developers.google.com/codela bs/flutter/index.html

(7)

Page 7/28

こっそり

コードラボは、Flutter実装を断片的に説明します。このため全体像が掴みづらく少し判りにくい？

サンプルコード一式は、

github で公開されていますので最終状態のコードを読んだほうが

Flutter フレームワークについて理解しやすいでしょう。サンプルコード一式

https://github.com/flutter/friendlychat-steps 最終状態のmain.dart

(8)

Page 8/28

こっそり２

サンプルコード一式は、github から取得可能です。 https://github.com/flutter/friendlychat-steps

# サンプルコード一式をクローン

$ git clone https://github.com/flutter/friendlychat-steps.git

実習で行った各ステップは、

クローンした offline_steps ディレクトリに、

0 〜 5 のプロジェクトに別れて保管されています。

…step5 のプロジェクトで最終形が取得できます。

(9)

Page 9/28

こっそり３

Flutter フレームワーク雑感

（個人の雑感です、正しい情報とは限りません）

1. Flutterは、Widgetを単位とするFramework

アプリも画面もレイアウトもUI部品も全てWidget アプリ ∋ 画面 ∋ レイアウト ∋ UI部品

2. アプリは、ルートWidgetを起点とする入れ子構造

⇒ void main(){ runApp(ルートWidget) }

(10)

Page 10/28

3. Widgetとは、表示機能と表示内容を持つオブジェクト 4. Widgetは、表示内容で２つに分かれる

表示内容が固定のものと変化するものがある

⇒ StateLessWidget と StateFullWidegt に分かれる 5. 表示内容の変化するものには、

Stateオブジェクトが必要

⇒ 変更要求に対応するハンドラを実装します。

6. 画面遷移は、アプリの子要素(画面)を切り替えて表現？

(11)

Page 11/28

Flutter でのアプリ開発の基本

Flutterでは、flutter コマンドを利用することで、

プロジェクトの作成からアプリの実行までが行えます。

# 主な flutter コマンド

$flutter doctor ⇒ SDKバージョンなど開発環境の状況をレポートします。

$flutter devices ⇒ 利用可能なデバイスのデバイスID一覧を出力します。

$flutter upgrade ⇒ Flutter SDK をアップグレードします。

$flutter create <アプリ名> ⇒ カレントディレクトリに

Flutter プロジェクトを作成します。

$flutter --help ⇒ コマンド(オプション)一覧が出力されます。

$flutter --help <コマンド> ⇒ コマンド詳細が出力されます。

(12)

Page 12/28

プロジェクト・ルートでの flutter コマンド

Flutterプロジェクトのルート・ディレクトリには、

pubspec.yaml というプロジェクトの全体構成や、利用パケージを指定する設定ファイルがあります。プロジェクト単位のコマンドは、

この設定ファイルを利用するコマンドでもあります。

# 主な Flutterプロジェクト・ディレクトリ直下で実行するコマンド

$flutter run ⇒ 利用可能なデバイスでデバッグ版のアプリを起動します。

$flutter run -d <デバイスID> ⇒ 指定デバイスでデバッグ版のアプリを起動

$flutter analyze ⇒ プログラムコードに問題がないか解析します。

$flutter get package ⇒ リポジトリから利用パッケージを取得します。

$flutter upgrade package ⇒ リポジトリから利用パッケージの最新版を取得

(13)

Page 13/28

pubspec.yaml ファイルについて

pubspec.yaml ファイルは、

以下のようにプロジェクト全体の設定を記述するファイルです。

プロジェクトで作成するアプリの名称マテリアルデザインに準拠するか否か利用する(取り寄せる)外部パッケージ

(クラスライブラリ)やリソースの指定など、

(14)

Page 14/28

最低限必要な記述内容

アプリ hello_world プロジェクトの pubspec.yaml

name: hello_world dependencies:

flutter:

sdk: flutter dev_dependencies: flutter_test: sdk: flutter flutter:

uses-material-design: true

(15)

Page 15/28

プロジェクトで利用するパッケージは、プロジェクトのルートディレクトリにある pubspec.yaml ファイルの

dependencies セクションで指定します。

Flutter 標準パッケージは、以下の指定で利用できるようになります。

dependencies: flutter:

sdk: flutter

(16)

Page 16/28

外部パッケージの利用

標準でないパッケージを利用する場合の手順

1. pubspec.yaml の dependencies セクションに

利用したいパッケージ名とバージョンを記述します。 (例)pubspec.yaml file の dependencies に

cloud_firestore パッケージを追加

dependencies:

　〜既存利用パッケージ指定〜

cloud_firestore: "^0.0.3"

(17)

Page 17/28

2. flutter packages get で、

リポジトリからパッケージソースをインストールします。 (例)$ flutter packages get

3. Dart プログラム・ファイルに、

指定パッケージの import 文を追加します。 (例)import

'package:cloud_firestore/cloud_firestore.dart';

(18)

Page 18/28

任意の github リポジトリも指定可能です。

Flutter > Use device and SDK APIs > Using packages

https://flutter.io/using-packages/ Flutter で利用可能なパッケージ一覧

pub.dartlang.org > Flutter Packages

https://pub.dartlang.org/flutter/packages Flutter SDK も pubspec.yaml ファイルを使ってパッケージを管理しています。

Flutter SDK の package/<各パッケージ>の

ディレクトリには pubspec.yaml ファイルがあます。

(19)

Page 19/28

Flutterプロジェクト作成

flutter create <アプリ名> コマンドで、実行したディレクトリに

<アプリ名>

の

プロジェクト・ディレクトリが作成されます。

$ flutter create myapp

(20)

Page 20/28

プロジェクト・ディレクトリの構成

プロジェクトディレクトリ/

　|　+- lib/ ⇒ Flutter アプリプログラム・ディレクトリ　| (Xxx.dart ファイル配置先)

　+- test/ ⇒ Flutter テストプログラム・ディレクトリ

　+- android/ ⇒ Android ネィティブアプリ用ディレクトリ　+- ios/ ⇒ iOS ネイティブアプリ用ディレクトリ

　+- pubspec.yaml ⇒ プロジェクト全体設定ファイル(後述) 　+- pubspec.lock ⇒ 上記のアクセスロック用ファイル

　+- README.md ⇒ アプリ説明用のマークダウン・ファイル　|　+- build/ ⇒ ビルド結果ファイル配置先

(初期時には存在せず、flutter run により作成されます)

# …この他に、android.iml や myapp_android.iml、myapp.iml などの

# 　IntelliJ IDE 用の設定ファイルも作成されます。

(21)

Page 21/28

生成プロジェクトの留意事項

flutter create <アプリ名> コマンドで作成された

Flutterプロジェクトには、iOS と Android のネイティブアプリ用のプロジェクト・ディレクトリが作られます。

ネイティブ部の自動生成限界に注意ネイティブ部の自動生成限界に注意

android ディレクトリ下には、

Android Studio プロジェクトが作られますが、

app モジュールの build.gradle の applicationId は、

"com.yourcompany.<アプリ名>" となります。必要があれば、適宜書き換えてください。

(22)

Page 22/28

Flutter アプリのデバッグについて

プログラム中への

debugger()ステートメント追加によるブレークポイントの挿入や、 Dart Observatory(監視塔)により、flutter run で実行中のアプリをステートメントレベルでデバッグ実行できます。

詳しくは、Debug your app を参照ください。

Flutter >Flutter > Development and tools > Debug your app

https://flutter.io/debugging/

(23)

Page 23/28

画面遷移とWebAPIリクエスト

画面遷移とWebAPIリクエストについては、

下記の Qiita投稿のサンプルアプリが参考になります。 Flutterの画面遷移

https://qiita.com/tatsu/items/38cd85efd93005 b95af9

図書館の詳細画面を表示するサンプルアプリ

https://github.com/tatsu/libraries_in_japan Qita Flutter タグ

https://qiita.com/tags/Flutter/items

(24)

Page 24/28

プラットフォーム固有 API の使用

Camera や GPS など、

プラットフォーム固有の API を使う場合は、

android や ios ディレクトリ配下のネィティブ・プロジェクトに、固有API用の実装と Flutter ⇔ プラットフォームの非同期メッセージパッシングの実装追加が必要です。

Flutter > Use device and SDK APIs > Platform-specific code

https://flutter.io/platform-channels/

(25)

Page 25/28

platform-channels 概念

Flutter から Android や iOS の

プラットフォーム固有の API を使うには、

platform-channels というメッセージ送信と応答受信を非同期で行う概念を用います。 Flutter,Android,iOS 用のライブラリには、

platform-channels 概念を表す MethodChannel というクラスと関連パッケージが提供されています。

このオブジェクトを介して

非同期のメッセージパッシングを行います。

(26)

Page 26/28

platform-channels 概念

メッセージパッシング機能は、

Flutter ⇔ Android/iOS の双方向で行えます。

送信側と応答側の両者で当該オブジェクトを介した

共通のチャネル名の設定と、応答側での、そのプラットフォーム用の対応実装が必要になることに留意ください。

(27)

Page 27/28

platform-channels 概念

具体的な実装方法については、

Platform-specific code ページや、

バッテリーレベルを取得するサンプルを参照ください。サンプルプロジェクト参照先

(Flutter SDK配置ディレクトリ)/flutter/examples/platform_channel (Flutterリポジトリ)/flutter/examples/platform_channel/

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

(28)

Page 28/28

Flutter アプリのリリースについて

Flutter アプリを

Google Play や App Store に公開するには、いずれも Android や iOS ネィティブでの

リリース知識を前提とした手順が必要です。詳しくは、以下を参照ください。

Flutter > Development and tools > Build and release for Android

https://flutter.io/android-release/

Flutter > Development and tools > Build and release for iOS

https://flutter.io/ios-release/

表示 勉強会 資料 Google Developer Group 京都 Flutter memo

Flutter覚書

Flutter覚書

ちょっとした補講

Flutter って何？

Flutter サンプル・プロジェクト

Flutter サンプル・プロジェクト

(Flutter SDK配置ディレクトリ)/flutter/examples/

flutter/examples/

Flutter でのコーディング

こっそり

こっそり２

…step5 のプロジェクトで最終形が取得できます。

こっそり３

（個人の雑感です、正しい情報とは限りません）

Flutter でのアプリ開発の基本

プロジェクト・ルートでの flutter コマンド

プロジェクト・ルートでの flutter コマンド

pubspec.yaml ファイルについて

最低限必要な記述内容

最低限必要な記述内容

外部パッケージの利用

外部パッケージの利用

Flutterプロジェクト作成

<アプリ名>

プロジェクト・ディレクトリの構成

生成プロジェクトの留意事項

Flutter アプリのデバッグについて

画面遷移とWebAPIリクエスト

プラットフォーム固有 API の使用

platform-channels 概念

platform-channels 概念

platform-channels 概念

platform-channels 概念

platform-channels 概念

platform-channels 概念

Flutter アプリのリリースについて

表示勉強会資料 Google Developer Group 京都 Flutter memo