Google謹製のFlutterを使ってみた(導入編)

のえる のえる 2018.12.20

スマートフォンアプリ開発が初期の頃から、AndroidとiOSのマルチプラットフォーム開発は行われてきました。
しかし、各OS仕様の変更や開発環境の制限など、様々な理由からマルチプラットフォームの実現は厳しいと思います。
 
そんな折、Googleから「Flutter」というマルチプラットフォーム開発用SDKが提供されました。
このSDKではGoogleが開発した「Dart」という言語を使用し、iOS/Androidのアプリを同時に開発することが可能となりました。
 
そこで今回はFlutterをインストールし、テンプレートアプリを起動できるまでを行って行こうと思います。

Flutter SDK インストール

Flutterのインストールを行っていきます。
すでにインストールが終わってる方は コチラ からスキップできます。
 
FlutterはGitHubにて公開されていますので clone をするか、公式サイトからzipファイルをダウンロードします。

※記事作成時点でのstableバージョンは v1.0.0 です
 
ダウンロード後は flutter/bin までパスを通し、コマンドを実行できるようにします。

 
その後、下記コマンドを実行し、flutterの環境チェックを行います。

 
実行後、下記のような内容が表示されると思います。
このとき、「Connected device」以外でチェックがついていないものがある場合、正しく起動できない場合があります。
その際は内容がコマンド結果に表示されますので、逐次対応をします。
(詳細を表示する場合、コマンドオプションで -v を追加してください)

 
そしてお気づきかと思いますが、開発は Android Studio で行います。
また、iOSアプリケーションを開発する場合、Xcodeが必要となります。
※Android Studio および Xcode のインストール方法は割愛します。

Android Studio 設定

Android Studioにも設定を行います。
Preferences -> Plugins を開き、下記のものを検索&インストールします。
(必要に応じてAndroid Studioを再起動してください)

  • Dart
  • Flutter
  • Flutter i18n

プロジェクト作成

さて、ここからが本題です。
Flutterのプロジェクトを作成していきましょう。
 
Android Studio -> File -> New -> New Flutter Project でプロジェクトを作成します。
 



コチラの画面では、作成するプロジェクトの設定を行います。
アプリケーションを作成するので、今回は Flutter Application を選択します。
 



アプリケーション設定では、アプリケーション名やFlutter SDKの場所などを設定します。

  • Project Name: プロジェクト名(小文字のみのスネークケース)
  • Flutter SDK Path: インストールしたFlutter SDKまでのパス(binの1つ上までを指定)
    ※Install SDKは押す必要がありません。
  • Project Location: プロジェクトを保存するディレクトリを指定
  • Description: プロジェクトの説明などを記載(記載する必要は特にないと思います)
  • Create project offline: 特にチェックする必要はありません

 



最後にアプリケーションのパッケージ名を設定します。

  • Company domain: 企業ドメイン(例: blitzgate.co.jp)
    ※ここに記載する場合、「ドメインの逆記載」をする必要はありません。
  • Package name: パッケージ名(ドメインの逆記載)
    ※故意に変更する必要がない場合、自動入力の内容でOKです。
  • Platform channel language: プラットフォーム内で使用可能な言語の追加
    ※KotlinやSwiftを使用可能にするかどうかです。

 
ここまで設定を行うと、プロジェクトが作成されます。

アプリを実行する

プロジェクト作成後 lib/main.dart が開かれていることと思います。
内容は下記のとおりです。

この状態で Android Studio 上部にあるデバイス設定からアプリを実行するデバイスを選択。
そして Run(実行) をすることで、デバイスにアプリケーションがインストールされ、実行されます。



 
実行後、下記のような画面がデバイスで表示されれば、無事成功となります。



 

iPhoneにインストール出来ない場合

iOS12 でのアプリ実行時、下記のようなエラーが表示されることがあります。

この場合、iPhoneの 設定 -> 一般 -> プロファイルとデバイス管理 -> デベロッパAPP に、開発者を信頼する項目があります。
この項目にある「”xxx@example.co.jp”を信頼」という項目をタップし、信頼することでアプリをインストール・実行することができます。
 


 
続いて、開発のTipsは コチラ です。

POPULAR

のえる

書いた人

のえる

Full-stack Developer / Guitarist