Google Flutter

日本システム開発株式会社からGoogle Flutterに関するコラムをお届けします。

車載システムなど豊富な組み込み領域の実績を持つ弊社から、組み込み業界でもホットなFlutterに関する情報を発信します。

日本システム開発の技術、
覗いてみませんか。

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

2021.06.17

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インストール

SDKをダウンロードする

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

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

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

SDKを解凍する

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

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

展開先

C:\Flutter\

パスを通す

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

Path設定

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

インストールの確認

コマンドプロンプトを開いてインストールした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インストール

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

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

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

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

インストールする

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

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

C:\Program Files\Android\Android Studio

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

Flutterセットアップ

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

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

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

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

flutter doctor

依存関係の問題が表示されます。

[!]がついた項目を順番に解決していきます。

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

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)

Flutterプラグインの導入

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

Flutterプラグイン

Dartプラグイン

Androidエミュレータの作成

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

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

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

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

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

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

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

Flutter App > Nextで進みます。

Flutter SDK pathにはSDKをインストールした場所を設定します。

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

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

アプリケーションの実行

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の違い」についてお伝えする予定です。

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