お久しぶりです。 

のりさんです。 

最近暑くなってきましたね。 

みなさんいかがお過ごしでしょうか。 

今回は最近気になっている「Flutter(フラッター)」について書きたいと思います。 

みなさん「Flutter」について、どこかで聞いたことがあるでしょうか。 

私も最近興味を持ち始めたので、あまり聞きなれない人もいるかもしれません。 

 ● Flutterとは 

• Googleが開発したクロスプラットフォームフレームワーク
• Dart(ダート)という言語で開発を行い、AndroidやiOS等のアプリとしてビルドできる

というものらしいです。

AndroidやiOSアプリの開発を同時に開発出来て工数削減とか期待できそうですね。 

2021年3月にFlutterのバージョンが「2」になったようです。

Flutter2ではAndroidやiOSアプリに加えて以下について対応が増えたとのこと。 

• Windows
• macOS
• Linux
• Webブラウザ

Flutterの古いバージョンで開発したアプリを新バージョンに更新して

少し手を加えるだけで他のOSでも動作するようになるのはよさそうですね。 

（6月現在では「2.2.2」となっており、機能がどんどん追加されていきそうな印象です） 

以上のようなところからクロスプラットフォーム開発に興味を持ったのですが 

Flutterを知るには実際に触ってみるのがよさそうなので 　環境構築からやっていきたいと思います。

● Flutterの環境構築

実際に環境構築してFlutterのデモアプリが動作するところまで書きたいと思います。 

PCについてWindows10(Pro)利用のため、こちらで進めていきます。 

■ Flutter SDK 

　　1. 以下のFlutter公式サイトにアクセスしSDKをダウンロードします。 

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

 ⇒今回は「Flutter_windows_2.2.2-stable.zip」で進めていきます。 　

　　2. SDKファイルのダウンロードが終わったらzipファイルを解凍します。 

　　3. 環境変数の「Path」設定します。 

 ⇒コントロールパネル＞システムとセキュリティ＞システム＞システムの詳細設定＞環境変数 

 　変数名Pathを編集し【2.解凍ディレクトリ\flutter\bin】を追加します。 

　　4. PowerShell等で以下のコマンドを入力し、バージョン情報が表示されれば完了です。 

 >flutter –version                                    

 Flutter 2.2.2 • channel stable                  

　■ Android Studio 

　　1. ソフトウェア（開発環境）のインストール 

以下よりダウンロードしてインストールしました。 

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

　　2. Andorid Studioを日本語化 

以下のサイトよりpleiades-win.zipをダウンロードしてzipを解凍しました。 

https://mergedoc.osdn.jp/#pleiades.html#PLUGIN



解凍したフォルダにあるsetup.exeを実行していきます。 

日本語化の画面が表示されたら「日本語化するアプリケーション」を選択し

ファイルパスを設定しました(例：C:\Program Files\Android\Android Studio\bin\studio64.exe )

日本語化するボタンをクリックで日本語化は完了です。 

　　　「Android Studio ArcticFox 2020.3.1」の場合はこちら

　　　　　①日本語化プラグインのダウンロード

　　　　　　・https://plugins.jetbrains.com/のサイトにアクセス

　　　　　　・検索「Japanese Language Pack / 日本語言語パック」

　　　　　　・Getボタン押下

　　　　　　・Version「203.709」をダウンロード

　　　　　②Android Studio 起動 > File > Settings > Plugins

　　　　　　設定アイコンをクリックしてInstall Plugin from Diskから①のJarファイルを選択

　　　　　③Android Studio再起動後に日本語化されます

 　　3. Android SDKのライセンス条項への承諾 

PowerShell等で以下のコマンドを実行し「y」を入力して進みました。

>flutter doctor –android-licenses 

 4. Flutterプラグインのインストール 

Android Studioを起動します（日本語化されていました） 

起動画面＞構成＞プラグインから

「Flutter」プラグイン※をインストールします。 

※flutter.devのダウンロード数が9M以上になっているもの

 5. FlutterのAndroid Studio認識設定 

PowerShell等で以下のコマンドを実行します 

>flutter config –android-studio-dir=”【インストールパス※】” 

※例：C:\Program Files\Android\Android Studio 

 6. Android仮想デバイスの作成 

AndroidStudioからAVD Managerをクリックし仮想デバイスを追加します。  ⇒今回「Pixel 3 XL API 30(Android 11)」を作成してみました。 

■ Flutter デモアプリ

1. 新規Flutterプロジェクトの作成 

　　　 Android Studioのメニュー＞ファイル＞新規 Flutter プロジェクトをクリックします。 

 Flutter Appを選択し、Flutter SDKパスに【SDK解凍パス】を設定し

 次へをクリックして進みます。

 次の画面はデモの動作確認なので、そのまま完了をクリックします。 

2. Flutterデモアプリを実行してみます 

　　    Androidエミュレータを起動します。 

起動したら右側にある実行ボタンをクリックします。

おお、Androidでデモアプリが起動しました！ 

　　    ＋ボタンをタップ（クリック）すると数字が増えていきます

　　    先ほどのデバイス選択にてEdgeも選択できるようなので

　　    こちらも試してみたいと思います。 　　    Edgeを選択して実行ボタンをクリックしてみます。

　　    こちらもEdgeブラウザで動作していますね。

　　    同じく＋ボタンで数字が増えていきます。

　　　１つのソースでどちらも動作するっていいですね！

今回はAndroidとブラウザで同じデモプログラムが動作するところまで書いてみました。

これからデモのソースコードを参考にしつつDart言語について理解を深めたいと思います。