Google Flutter コラム- 第1 回 Google Flutter を 導入してみた

2021年3月3日にGoogleから「Flutter 2」が発表されました。

Flutterは2017年に初版がリリースされたクロスプラットフォームUIツールキットで、Flutter2はそのメジャーアップデート版です。
GooglePlayストアに登録されている中でも150,000を超えるアプリがFlutterで開発されており、幅広く活用されています。
また、トヨタ自動車が新しい自動車向け車載機器の開発にFlutter 2を採用したことも発表されており、Googleもトヨタとの連携を謳っています。

そんな、組み込み分野でもホットなFlutterについて組み込み環境での活用について本コラムで紹介していきます。 初回の今回は、Flutterのメリットと、環境構築についてまとめました。

Flutterとは?

FlutterとはGoogleが提供しているクロスプラットフォームUIツールキットです。

iOS,Android,Linuxなど標準でサポートしており、同じソースコードを使って開発が可能です。

Flutterは「Dart」を使って開発を行います。

「Dart」はGoogleがJavaScriptを置き換えることを目標に2011年頃、発表した言語です。

2018年にはDart2になり、型推論など大幅な機能強化が行われています。

Flutterは開発効率も非常に高く、再度ビルドせずにアプリへ変更を反映する「HotReload」や、

API仕様/クラス図の生成が自動化できること、単体検査の仕組みが組込まれているなど、
効率の良い開発を継続するために必要不可欠な要素も揃っています。

2021年3月3日に発表された「Flutter 2」では

WindowsデスクトップアプリとWebアプリへ正式対応したことに加え、
NullSafetyによるアプリケーションの安全性の強化などが行われました。

自動車業界の参入などもあり、コミュニティーが非常に活発で、

開発で使用できるオープンソースライブラリの充実度から見ても今後の発展が期待されています。
https://pub.dev/

推奨環境

OS: Windows7/8/10 (64bit)

メモリ: 8GB以上
Disk: 5.5GB以上
   (Flutter 1.32GB以上, Android Studio 4GB以上を推奨)

Flutterインストール

1. SDKをダウンロードする

公式サイトへアクセスし、SDKをダウンロードする

Flutter公式 Windows用SDKダウンロードページ

https://flutter.dev/docs/get-started/install/windows

2. SDKを解凍する

任意のフォルダに解凍しSDKをインストールします。

今回はCドライブ直下にFlutterフォルダを作成し、SDKを展開します。

展開先

C:\Flutter\

3. パスを通す

FlutterSDKトップ\…\binを環境変数のPathに設定します。

Path設定

C:\Flutter\flutter_windows_2.2.0-stable\flutter\bin

4. インストールの確認

コマンドプロンプトを開いてインストールしたFlutterのバージョンを確認してみます。
flutter --version
正しく設定できていればバージョンが確認できます。

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (7 days ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

Android Studioのインストール

1. インストーラーをダウンロードする

公式サイトへアクセスし、インストーラーをダウンロードする。

Android Studio公式 ダウンロードページ

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

2. インストールする

インストーラーを実行し、アナウンスに従ってインストールします。

インストールする場所は任意ですが、今回は標準の場所にインストールします。

C:\Program Files\Android\Android Studio

Android Studioが起動したらインストール完了です。

Flutterセットアップ

1. セットアップ状況を確認する

Flutterが依存している環境を整備していきます。

依存関係はコマンドで確認することができます。

コマンドプロンプトを開きコマンドを入力します。
flutter doctor

Flutterが依存している環境を整備していきます。

依存関係はコマンドで確認することができます。

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.0, on Microsoft Windows [Version
10.0.19043.964], locale ja-JP)
[!] Android toolchain – develop for Android devices (Android SDK version 30.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses
[√] Chrome – develop for the web
[!] Android Studio (not installed)
[√] VS Code (version 1.56.2)
[√] VS Code, 64-bit edition (version 1.48.0)
[√] Connected device (2 available)

 

! Doctor found issues in 2 categories.

まずは先程インストールしたAndroid StudioがFlutter doctorに認識されていない問題を解決します。
[!] Android Studio (not installed)
コマンドにAndroid Studioをインストールした場所を設定し実行します。
flutter config –android-studio-dir=”C:\Program Files\Android\Android Studio”
再度Flutter doctorを実行するとAndroid Studioがインストールされていることが確認できます。
[√] Android Studio

2. Androidライセンスを許可する

[!] Android toolchain – develop for Android devices (Android SDK version 30.0.3)
 ! Some Android licenses not accepted. To resolve this, run: flutter doctor –android-licenses

コマンドを実行し、ライセンスを許可する。
flutter doctor --android-licenses
エラーが解消されたことが確認できます。
[√] Android toolchain – develop for Android devices (Android SDK version 30.0.3)

3. Flutterプラグインの導入

Android Studio > Configure > Plaginsからプラグインをインストールします。

・Flutterプラグイン

・Dartプラグイン

4. Androidエミュレータの作成

Android Studio > Configure > ADV Managerからエミュレータを作成します。

システムイメージのAPIレベルが29以上で作成を続けます。

今回はRelease Name “R”を使用して作成しました。

作成が完了し、Androidエミュレータが起動できる状態になります。

サンプルアプリケーションの実行

1. Flutterアプリケーションの作成

AndroidStudio > Create New Flutter Projectから作成していきます。

Flutter App > Nextで進みます。

Flutter SDK pathにはSDKをインストールした場所を設定します。
C:\Flutter\flutter_windows_2.2.0-stable\flutter

その後、Flutterアプリの環境が自動生成されます。

2. アプリケーションの実行

Androidエミュレータを起動し、Runボタンを押します。

約20秒※ほどでサンプルアプリがビルドされエミュレータ上に起動されます。

HotReloadで画面中央の文字が変更できることを確認してみます。

※PCスペックによって起動時間は異なります。

  参考までに今回使用したPCスペックは以下になります。
OS: Windows10 64bit
CPU: Intel® Core™ i7 Processor
メモリ: 32.0GB
Disk: SSD 1TB

まとめ

Flutterは自動車業界の参入などで、更に発展が見込まれています。

手軽に導入でき、HotReloadなど開発効率も高いことがわかりました。

次回のコラムでは、
GoogleMap/MapBoxを使って地図を表示させてみます。

「どのようにFlutterへ導入するのか?」や「GoogleMapとMapBoxの違い」についてお伝えする予定です。

お問い合わせ

名古屋本社

東京本社

【受付時間】9:00~18:00

pagetop

お客様のお悩み承ります。