1. HOME
  2. ブログ
  3. IT技術
  4. Flutter(フラッター)の紹介から環境構築まで

IT技術

Flutter(フラッター)の紹介から環境構築まで

広告メディア事業部

2021.12.20

Flutter（フラッター）とは？

Flutter（フラッター） とは、 Google が開発している UI フレームワークです。

主要開発言語は、 Dart（ダート） です。

Flutter は、はじめはモバイルアプリ向けの UI フレームワークとして発表されました。

しかし、現在は、モバイル、Web、デスクトップとマルチプラットフォーム対応になりつつあるホットなフレームワークです。

また、Flutter の安定版 v1 のリリースされたのは、2018年11月30日、アルファ版のリリースでも2017年5月12日とかなり新しいフレームワークです。

今回は、 Flutter がどのようなものか紹介し、開発環境の構築までを紹介しようと思います。

Flutterの紹介

1つのコードでマルチプラットフォーム！

Flutter とは、1つのコードで、「Android」と「iOS」向けのアプリを開発できるフレームワークです。

またデスクトップ、組み込みデバイス向けにも動作するように開発が進められており、サンプルプログラムがすでに公開されています。

そして先日、 Flutter for Web によって Web にも対応することが発表されました。

つまり、Flutter は「モバイル」「Web」「組み込み」「デスクトップ」とマルチプラットフォーム対応のUIフレームワークになりつつあります。

マテリアルデザイン

Flutter のデザインは Google が推奨するマテリアルデザインを採用しています。

既に、Flutter の開発チームがかなりの数の UI パーツを提供しています。

そのため、開発者はすでに用意された UI パーツを組み合わせることで、それなりに整った UI を簡単に作成することができます。

また、Flutter で開発された UI はコンパイル時に各プラットフォームのネイティブコードに変換され、高速に動作します。

ホットリロードによる高速開発

Flutter はホットリロードに対応しています。

ホットリロードとは、コード実行中にエディターでコードを変更したら、再起動することもなく、即座に変更内容が反映される仕組みです。

ホットリロードは、UIの構築や機能追加、バグ修正に役立ちます。

サンプル

Flutter を利用したアプリは以下のリンクで確認できます。

Google 広告 などが Flutter で開発されています。

An open list of apps built with Flutter

また、 Play Store で Flutter の Widget を確認できる Flutter Gallery が公開されています。

Flutter の UI パーツがどんなものか実際に動かしながら確認できるので役に立ちます。

Flutter を開発してみよう

それでは、Flutter のモバイルアプリを開発してみましょう。

先日 Flutter for Web が発表されたとはいえ、テクニカルプレビューで安定性にかけます。

よって本記事では、正式に安定版が発表されているモバイルアプリの環境構築について取り上げます。

Get the Flutter SDK

公式が用意してくれている、上記の手順にしたがって進めていきます。

Flutter 公式サイトのドキュメントのライセンスは、 Creative Commons Attribution 4.0 International License で提供されています。

Flutter SDK のインストール：Windows 編

Windows で Flutter 開発を行うのに必要なシステム要件は以下のとおりです。

  1. OS: Windows 7 SP1 以上 (64bit)
  2. ディスクスペース: 400MB（IDEやその他ツールを含みません）
  3. Windows PowerShell 5.0 以上
  4. Git for Windows 2.x

それでは Windows で Flutter SDK をインストールしていきましょう。

Flutter SDK をダウンロード

執筆時点 (2019/05/14) での最新版:flutter_windows_v1.5.4-hotfix.2-stable
※上記リンクを押すとダウンロードが開始されます。

（Flutter SDK のリリースサイクルは短いので、公式サイトにて最新版をダウンロードすることをオススメします）

Flutter SDK を解凍

Flutter SDK を解凍する場所は C:\src\flutter などにしてください。

C:\Program Files\ となどの管理者権限が必要な場所には展開しないでください。

解凍した flutter フォルダ内にある flutter_console.bat をダブルクリックして起動します。

コンソール画面が立ち上がり、Flutter のコマンドが実行可能になります。

PATH の設定（任意）

Flutter を実行するために毎回、flutter_console.bat を利用するのは面倒です。

環境変数を設定し、普通のコンソール画面でも flutter コマンドを実行可能にしましょう。

  1. スタートメニューを開き、"env" と検索
  2. 「システム環境変数の編集」を開く
  3. 「環境変数」を開き、「ユーザー環境変数」のなかの「Path」をダブルクリック
  4. 「環境変数名の編集」ウィンドウが開いたら「新規」をクリックして、flutter\binまでのPATHを記述する（今回の例だとC:\src\flutter\bin)

コンソールを再起動して変更を適用します。

flutter doctor でシステムチェック

Flutter 開発で必要なツールチェーンがパソコンにインストールしているか、診断する flutter doctor を起動します。

出力例

必要なツールがインストールされていない場合、どのようにインストールすればいいのか提示されるので、その指示にしたがってください。

上記の例だと、Android SDK がインストールされていないと示されているので、別途 Android Stuido や Android SDK をダンロードしてください。

以上で Flutter SDK の導入は完了です。

Windowsの人は「環境構築 Linux 編」を飛ばして、 「Android Studio のセットアップ」に進んでください。

Flutter SDK のインストール： Linux 編

Linux で Flutter 開発を行うのに必要なシステム要件は以下のとおりです。

  1. OS:Linux
  2. ディスクスペース：600MB（IDEやその他ツールを含みません）
  3. bash
  4. curl
  5. git 2.x
  6. mkdir
  7. rm
  8. unzip
  9. which
  10. xz-utils

それでは Linux で Flutter SDK をインストールしていきましょう。

Flutter SDK をダウンロード

執筆時点 (2019/05/14) での最新版:flutter_linux_v1.5.4-hotfix.2-stable.tar
※上記リンクを押すとダウンロードが開始されます。

（Flutter SDK のリリースサイクルは短いので、公式サイトで最新版をダウンロードすることをオススメします）

SDK を解凍

例として、~/development フォルダに SDK を解凍します。

Flutter のパスを設定する

上記コマンドは、現在のターミナルだけに PATH を設定します。

もし Flutter の永続化をする場合、~/.bash_profile, ~/.bashrc などに export PATH="$PATH:${flutterフォルダまでのパス}/flutter/bin" と記述してください。

~/.bash_profile に記述した場合、ログインログアウトを行った後に、~/.bashrc に記述した場合、ターミナルを再起動したときに Flutter SDK への PATH が永続化されます。

flutter doctor でシステムチェック

Flutter 開発で必要なツールチェーンがパソコンにインストールしているか、診断する flutter doctor を起動します。

出力例

必要なツールがインストールされていない場合、どのようにインストールすればいいのか提示されるので、その指示にしたがってください。

上記の例だと、Android SDK がインストールされていないと示されているので、別途 Android Stuido や Android SDK をダンロードしてください。

Android Studio のセットアップ

ここからは、 Windows、Linux 共通です。

（若干差異があるかもしれませんが、そこはノリと気力で乗り越えましょう）

Flutter の開発では Android Studio や VS Code が利用できます。

本記事では、 Android Studio を用いた開発環境構築をすることにします。

Android Studio をインストール

Android Studio の公式ページより、Android Studio をダウンロード、インストールしてください。

Android Studio を起動するとセットアップウィザードが表示されます。

Android用の Flutter 開発で必要になる Android SDK、Android SDK Platform-Tools、Android SDK Build-Tools をインストールします。

Android Emulator のセットアップ

Android Emulator でFlutter アプリをテストする場合、Emulator を準備する必要があります。

  1. Android Studio を起動し、Tool > Android > AVD Manager と進む
  2. "Create Virtual Device" を選択
  3. どのデバイスのエミュレーションを行うか選択し、"Next" をクリック
  4. エミュレーションで使用したい Android のシステムイメージを選択し、"Next"をクリック
  5. "Finish" をクリックしてセットアップを完了

（筆者だけかもしれませんが、Android のシステムイメージを "Q" にしていたら、Flutter アプリを起動するときにエラーが発生しました。Android Pie ではエラーが発生せず、アプリを実行できました）

Flutter Plugin のセットアップ

Flutter 公式が Flutter 開発のためのプラグインを提供しているので、インストールしてください。

  1. Android Stuido を起動する
  2. Plugin の設定ページを開く（File > Setting > Plugins )
  3. Flutter Plugin を探してインストール。（検索窓に Flutter と入力するとすぐに見つかるはずです）
  4. Dart Plugin を一緒にインストールするか聞かれるので「Yes」を選択
  5. 「Restart」を選択して、Android Studio を再起動する

お疲れ様です。これで、Android Studio の設定は完了です。

Flutter プロジェクトの作成

それでは、 Flutter のプロジェクトを作成していきましょう。

Android Studio より、以下の手順で進んでください。

  1. File > New Flutter Project
  2. 「Flutter application」を選択して「Next」をクリック
  3. Flutter SDK path が正しく SDK の位置になっていることを確認する
  4. Project name にアプリの名前（例：flutter_app）を入力して、「Next」をクリック
  5. 「Finish」をクリック
  6. Flutter プロジェクトが新規に作成されるのを待ちます。

Flutter アプリを動かしてみる

プロジェクトが用意できたら、一度アプリを起動してみましょう。

Android Studio のツールバーは以下のようになっています。

target selector でどの Android デバイスでアプリを起動するのか選択できます。

Android Studio で設定したAndroid Emulator を選択してください。

緑の三角の 「Runボタン」を押してください。

エミュレーターが起動し、Flutter アプリがロード、実行されます。

ホットリロードを試してみよう

Flutter は、ホットリロードに対応しています。

試してみましょう。

  1. lib/main.dart を開いてください。
  2. エミュレーターが起動している状態で、以下の文言を変更してみましょう。

以下のように変更します。

  1. pushed -> clicked

  1. 変更内容を保存します。

エミュレーターの実行結果を確認すると、言葉が即座に切り替わっているのが確認できるはずです。

さいごに

本記事では、 Flutter の「紹介」と「環境構築」までを取り扱いました。

Flutter を利用することで、 Android と iOS のネイティブアプリが両方開発できるようになります。

そして、今後は「デスクトップ」、「Web」と利用できる場面も増えていきます。

本記事が Flutter アプリの開発のお役に立てれば幸いです。

こちらの記事もオススメ！

2020.08.14
スマホ技術 特集
Android開発 Android開発をJavaからKotlinへ変えていくためのお勉強 DelegatedProperties(委...

2020.07.17
ライトコード的「やってみた！」シリーズ
「やってみた！」を集めました！ （株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！ ※作成日が新しい順に並べ...

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の（株）ライトコードです！

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎！

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…！ /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア

もっと求人を見る

ビジネスパートナー募集中

\ ビジネスパートナー求む /

SESパートナー募集

\ 優良案件ご提案致します /

フリーランスエンジニア