この記事の要点
- Flutterの環境構築にはターミナルによるコマンドの実行とXcodeが必要。
- FlutterはiOSアプリやAndroidアプリだけではなく、Webアプリの開発も可能。
- Flutter開発を加速させるflutter_markdownやDev Toolsなどのプラグインがおすすめ
FlutterはGoogleがリリースした、iOSアプリとAndroidアプリを同時に開発できるフレームワークです。
難易度も低く無料で始められることで、今後の成長も期待されています。
最近ではWebアプリも開発できるようになり、さらに開発環境の幅が広がりました。
エンジニアを目指すなら選択肢に入れてほしい注目のフレームワーク「Flutter」の環境構築から簡単なアプリ開発まで紹介します。
目次
Flutterとは
Flutterとは2018年にGoogleがリリースした、モバイルアプリケーションを作成する、フレームワークです。
それまで、iOSアプリはXcode、AndroidアプリはAndroid Studioを使って別々に開発していました。
Flutterは一度にiOSアプリとAndroidアプリを作成することができるため、開発コストや開発期間を大幅に削減することができるという大きなメリットがあります。
Flutterのインストールと環境構築
ここからはmacOSにFlutter SDKをインストールする手順を解説します。
Flutter SDKをダウンロードする
まずは、下記のURLよりFlutter SDKをダウンロードします。
flutter_macos_3.3.10-stable.zip
flutter_macos_arm64_3.3.10-stable.zip
上がインテル版Mac用、下がAppleシリコン用のSDKになります。
Flutterの環境構築
次にFlutterの環境を構築します。
Flutter解凍場所の作成とコマンドの実行
「Finder」を起動し、上のメニューから、「移動」をクリック、「ホーム」をクリックします。
表示されるホームディレクトリーに「development」というホルダーを新規に作成します。
次にアプリのターミナルを起動します（Launchpad内の「その他」の中にあります）
次のコマンドを実行します。
$ cd ~/development $ unzip ~/Downloads/flutter_macos_arm64_3.3.10-stable.zip $ export PATH="$PATH:`pwd`/flutter/bin"
ここまでで、Flutterコマンドを実行する準備が完了しました。
Flutterコマンド実行の環境構築
続いて次のコマンドを実行します。
$ source ~/.bash_profile $ flutter precache $ flutter doctor
このコマンドを実行し、すべてにチェックがついている場合、セットアップが完了しています。
チェックがついていない部分はインストールが必要です。
Xcodeをダウンロード
Mac App StoreからXcodeをダウンロードします。
ダウンロード後、Xcodeを実行すると利用許諾が表示されるので「Agree」をクリックします。
以上で、Flutter実行環境は整いました。
（実際にプログラムを修正したり追加したりする場合は、Android StudioやVisual Studio Codeが必要です）
$ open -a Simulator
iOSシミュレーターが実行されれば環境構築が整っていることになります。
チュートリアルでアプリ作成
ターミナルアプリで下記のコマンドを実行します。
$ flutter create my_app $ cd my_app $ flutter run
上記の画面が表示されれば、アプリが作成され実行されたことになります。
「＋」ボタンをクリックすると中央の数字が増えていきます。
アプリに修正を加えていくには、Android Studioのインストールが必要になります。
FlutterでWeb開発
ここからはWeb開発環境を構築します。
Webサポートの有効化
下記のコマンドを実行して、Webサポートを有効にします。
$ flutter channel beta $ flutter upgrade $ flutter config --enable-web
環境の確認
$ flutter devices
下記のように表示されればOKです。
プロジェクトの作成
続いてプロジェクトを作成します。
$ flutter create myapp $ cd myapp
実行
$ flutter run -d chrome
上記のように表示されれば、アプリは正常に動作しました。
「＋」ボタンをクリックすると中央の数字が増えていきます。
Flutter開発におすすめのプラグイン
ここからはFlutter開発で役立つおすすめのプラグインを3つお伝えします。
flutter_markdown
https://pub.dev/packages/flutter_markdown
Flutterでは、HTMLのようにタグを使って文字の大きさを統一することはできません。
flutter_markdownでは、HTMLは使えませんが、HTMLのような統一感を出すことができます。
アプリ開発ではそれぞれの文字を設定すれば良いかもしれませんが、Web開発でFlutterを使うと、flutter_markdownでHTMLのような設定ができれば、開発がはかどります。
Webでよくある、コードをコピーする表示も。flutter_markdownで実装可能です。
Dev Tools
https://docs.flutter.dev/development/tools/devtools/overview
Flutterで開発時にレイアウト検証ができるプラグインです。
また、パフォーマンス、メモリ、デバックなどを効率よく行うためのツールです。
Widgetの高さや幅が表示され、ピクセル単位での開発をサポートしてくれます。
動作ごとにメモリの使用量も確認できます。
見た目や動作を細かく知り調整できるプラグインです。
Analyzer
https://pub.dev/packages/analyzer
FlutterではDartというプログラミング言語を使用します。
Dartはデフォルトでは、最小限の型チェックのみとなります。
Analayzerプラグインを入れることで、通常ではチェックされないエラーを見つけることができます。
コードレビューに無駄な時間とエネルギーを使うことがなくなるため便利です。
まとめ
Flutterの導入から簡単なアプリの作成までお伝えしました。
FlutterはGoogleがリリースしたフレームワークなため、これからも成長を続けていくことが予測されます。
これからFlutterでの開発は成長していくため、エンジニアを目指すなら学習候補の一つとなります。
まだFlutterエンジニアが少ない今だからこそ、Flutterを学ぶとFlutterエンジニアとして先行することができます。
何年か前までは使われていたプログラミング言語も、現在下火になっているものもあります。
そのような中でFlutterは将来性のある技術であるため、これからFlutter学ぶなら将来長く活躍できるエンジニアになれるかもしれません。
