FlutterはiOSとAndroidの両方に対応したモバイルアプリケーションが簡単に作れるUIツールキットです。
宣言的な記述で、直感的にわかりやすいコードが書けるのが特徴です。
またWebやPC端末への対応も進んでおり、今後マルチプラットフォームのメインの技術となるでしょう。
ここではFlutterの基礎知識とインストール方法について説明しています。
また、Android Studioを導入して実機で動作確認をするための設定も解説しています。
Flutterを使ってアプリケーション開発を始めてみたいなら、こちらがおすすめです。
15万件以上の講座の中から自分にあったものを選んで取り組めます。
オンラインで受講ができるので、時間や場所を選ばずに学習ができます！
世界最大級のオンライン学習サイトUdemy
Flutterの基礎知識
Flutterとは
FlutterはGoogleが提供しているUIツールキットです。
UIとはユーザ・インタフェースのことで、アプリケーションの中でユーザが目にするすべての部分のことです。
つまり、Flutterはアプリケーションの見た目をつくるためのツールなのです。
モバイル・Web・デスクトップの全てに対応できるアプリケーションを単一のコードから構築できるようにすることを目指して開発が進められています。
現状はモバイルアプリの開発を中心に利用されていることが多いです。
通常、iOSとAndroidのアプリは別の言語を用いて開発されることが多いです。
そのため、両方のOSに対応しようとするとどうしても開発コストが高くなってしまいます。
しかしFlutterを使うことで、こういったマルチプラットフォーム対応のアプリケーション開発が比較的容易になります。
さらに近年は急速にWeb対応が進んでいます。
今後もこの調子でアップデートが行われれば、マルチプラットフォームの覇権を握る事は間違いないでしょう。
Flutterに類似の技術としてFacebookが開発しているReactNativeもあります。
ReactNativeはWeb技術をベースに作られており、JavaScriptを使っています。
Flutterがひとつのコードでマルチプラットフォームに対応しているのに対し、ReactNativeはひとつの技術でマルチプラットフォームに対応する、という違いがあります。
そのため、Flutterの方が再利用性・生産性が高いといえるでしょう。
Flutterの利点
FlutterはiOSとAndroidのプラットフォームにひとつのコードで対応できるのが最大の利点です。
しかしiOSネイティブなSwiftやAndroidネイティブなKotlinで開発を行う場合と比べても劣らないほど、美しいアプリケーションを開発することができます。
Flutterが採用しているDart言語では、宣言的にUIを記述することができます。
また、アプリの実行中にコードを変更してリロードができるため、スピード感を持って開発ができます。
エラーメッセージが丁寧であることも開発における大きなメリットのひとつです。
Flutterでは内部的にDart言語をネイティブな言語に変換しています。
そのためReactNativeと比較してもパフォーマンスの高い動作が期待できます。
現場を意識した本格的な学習カリキュラムで、本物のスキルを身につけたいならこちら！
困ったときにいつでも相談できるバディ制度でわからないこともすぐに解決できます。
プログラミングスクールといえば【RUNTEQ】
Flutterのインストール
ここではWindowsの場合の環境構築方法について解説していきます。
MacOSやLinux、Chrome OSの場合は公式ドキュメントを参照してください。
公式ドキュメントはこちら
まずはFlutterのSDKをダウンロードして、パスを通します。
zipファイルをダウンロードしてユーザのルートディレクトリなどに解凍します。
C:\Users\[user_name]\flutter\Flutterのパスを通す手順は以下のとおりです。
まず Win + S を押して、Windowsの検索ボックスからコントロールパネルの「システム環境変数の編集」を探して開きます。
以下のようなシステムのプロパティが開かれるので、「環境変数」を押します。
環境変数を開いたら、Pathを選択して「編集」を押します。
環境変数を新しく追加して、flutterディレクトリの中のbinにパスを通します。
C:\Users\[user_name]\flutter\bin
パスが通ったか確認するために、コマンドプロンプトを開いて以下のコマンドを実行してみましょう。
$ flutter doctor
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ Note: The Google Privacy Policy describes how data is handled in this ║
║ service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
╚════════════════════════════════════════════════════════════════════════════╝
Running "flutter pub get" in flutter_tools... 13.9s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.22000.318], locale ja-JP)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
`flutter config --android-sdk` to update to that location.
[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code (version 1.63.0)
[√] Connected device (2 available)
! Doctor found issues in 2 categories.これでFlutterの環境構築が整いました。
doctorコマンドでは開発環境構築に必要となるものを教えてくれます。
プログミングでわからないことがあったら、その道のプロに質問するのが一番！
現役で活躍中のエンジニアと繋がって、効率的にWeb開発のスキルを身につけましょう。
プログラミング学習のスキルプラットフォーム【MENTA】
Android Studioのセットアップ
Androidのアプリケーションを作成するには、Android StudioというIDE(統合開発環境)を利用するのが一般的です。
エミュレータを使うことで、仮想的なAndroidデバイスを動かすことができます。
インストールとFlutterプラグインの導入
以下のリンクからAndroid Studioをインストールします。
Android Studioのダウンロードはこちら
Android Studioをダウンロードしたら、インストーラの指示に従ってインストールを行いましょう。
Android Studioを開いたら、Pluginsから「Flutter」をインストールしておきます。
エミュレータの追加
Android StudioのProjectsにある「More Actions」から「AVD Manager」を開きます。
AVDはAndroid Visual Deviceの略で、仮想的なAndroidデバイスのことです。
続いて「Create Virtual Device…」をクリックします。
適当なデバイスを選択して「Next」をクリックします。
イメージをダウンロードして選択し、「Next」をクリックします。
「Finish」をクリックしてデバイスの追加完了です。
doctorコマンドの実行
一度、doctorコマンドを実行しましょう。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.22000.318], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.63.0)
[√] Connected device (2 available)
! Doctor found issues in 1 category.2つほど問題が発生しているようなので、解決していきたいと思います。
まずはひとつ目の問題を解決するため、Android Studioのトップから「SDK Manager」を開きます。
Android SDKの「SDK Tools」タブから「Android SDK Command-line Tools (latest)」をインストールします。
これで解決です。
続いてライセンスの問題を解決するために、次のコマンドを実行します。
ライセンス文が表示されますので、承諾していきます。
$ flutter doctor --android-licenses再度doctorコマンドを使用して、問題が解決されたことを確認しましょう。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.22000.318], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.63.0)
[√] Connected device (2 available)
• No issues found!このようにFlutterでは、doctorコマンドを使うことで環境構築をサポートしてくれます。
実機の実行環境の設定
ここからは、実機のAndroid端末でアプリケーションの動作確認を行うための環境を整えていきます。
先程用意したエミュレータを利用するため、AVD Managerを開きます。
エミュレータを選択し、実行ボタンをクリックします。
エミュレータが起動しました。
設定を開き、一番下にある「About emulated device」をタップします。
一番下までスクロールして、「Build number」を7回タップします。
前の画面に戻り、「System」をタップします。
「Advanced」をタップしてさらに項目を表示します。
「Developer options」をタップします。
「USB debugging」をオンにしておきます。
あとはAndroidの実機端末をUSBで接続し、ターミナルで以下のコマンドを実行すれば動作が確認できます。
$ flutter deviceFlutterアプリケーションの作成
以下のコマンドでFlutterのプロジェクトを作成してみましょう。
$ flutter create -i swift -a kotlin my_app
...
All done!
In order to run your application, type:
$ cd my_app
$ flutter run
Your application code is in my_app\lib\main.dart.Android Studioから作成したプロジェクトを開きます。
左側のディレクトリツリーから、lib/main.dartを開いてみましょう。
実行環境を選択して、アプリケーションを開いてみましょう。
ここではエミュレータで開いていますが、USBで実機のAndroid端末をつないで動作確認をすることもできます。
アプリケーションを開くと以下のような画面になります。
このアプリケーションでは、右下の＋ボタンをタップすると画面中央の数字がカウントされます。
まとめ
Flutterを使えば、マルチプラットフォームに対応したアプリケーションを容易に開発することができます。
FlutterではDartという言語で開発を行い、内部的にそれがネイティブのコードにコンパイルされるようになっています。
さらにFlutterはWebアプリへの対応も急速に進んでおり、今後もマルチプラットフォーム開発のデファクトスタンダードになると予想されます。
ひとりではなかなかプログラミングの学習が続かない、未経験だから不安が多い、という方はプログラミングスクールを利用してみるのも有効です。
本物のエンジニアに学ぶことで、時間がない方でも最短でスキルを身につけることができます。
現役エンジニアのパーソナルメンターからマンツーマンで学べる
お悩みの方は、まずは無料キャリアカウンセリングにお申込みください。
コメントを書く