0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter開発環境構築から、iOS・Androidデモアプリ起動までやってみた。

Posted at

#Flutter開発環境構築
1.FlutterSDKのダウンロード
2.環境変数Pathの設定
3.Android Studioのダウンロードとインストール
4.Android Studioを起動し、コンポーネントをダウンロード
5.Flutter Pluginのインストール

##FlutterSDKのダウンロード
まずは、Flutterの公式サイト(https://flutter.dev/)
からDocsを開き、Get Started OSの選択画面があるので、ご自身のPC環境に合わせてください。今回はMacを選択し、ダウンロードを開始します。
スクリーンショット 2020-12-27 15.16.04.png

##環境変数Pathの設定

export Path=$"Path:(フォルダへのパス)/flutter/bin"

・zshの場合 → .zshrcに追記
・bashの場合 → .bash_profileに追記
その確かめかたは、ターミナルを開きます。その上でecho $SHELLと入力すると、どちらかが判明します。

ターミナル
echo $SHELL

vimで該当のファイルを開き、先ほど開いた公式ドキュメントのページを少し下にスクロールすると、Update your Pathの内容をコピーして一番下に追記します。
[]の中身を自分のダウンロードしたフォルダまでのPathに変更します。

ターミナルを再起動し、Flutter doctorと入力します。これで問題なければOKです。

##Android Studioのダウンロードとインストール
公式ドミュメントのページをさらに下にスクロールすると、Android setupというページがあるかと思います。Android Studioのリンクがあるのでクリックしサイトに飛びます。
こちらからも(https://developer.android.com/studio)

ダウンロードをクリック。ダウンロードが終わるとアプリケーションフォルダに移動し、起動させます。
スクリーンショット 2020-12-28 8.55.09.png

##Android Studioを起動し、コンポーネントをダウンロード
初期設定が少し必要です。以下のように進めてください。

next
Do not import settings -> OK
standard -> next
Darcula or Light どちらか好きなデザインを選択 -> next
Finish

##Flutter Pluginのインストール
ConfigureからPreferencesを選択します。すると設定画面が出てくるので、Pluginsを選択し、Flutterを探しインストールします。Dartもセットでインストールするようになっています。Acceptで応じましょう。

インストールが完了すれば一度Android Studioを再起動します。

開発環境セットアップはこれにて完了です。
続いて、実際にエミュレーター(シミュレーター)を使ってアプリを起動してみようと思います。

#iOS/Androidデバイスでアプリ起動
1.Flutter projectの作成
2.エミュレーターの設定
3.Androidアプリの起動
4.Xcodeのインストール
5.iOSアプリの起動

##Flutter projectの作成
まずは、Android Studioから新規プロジェクトを作成します。
基本的にはデフォルトのままでOKです。Package nameだけお好きな名前に変更してください。Finishを押せば自動的にプロジェクトが作成されます。

##エミュレーターの設定
AVD Managerのアイコンをクリックします。右から4番目にある緑色のAndroidマークです。Create Virtual Devicesをクリックし、お好きなデバイスを選択します。初めての場合はダウンロードする必要があります。

##Androidアプリの起動
元の画面に戻ると、先ほどダウンロードしたデバイス名が表示されているかと思います。三角形のアイコンをクリックして仮想デバイスを起動させます。
Flutter Demo Home Pageというタイトルの青色の初期アプリが起動したはずです。+ボタンを押してみると数字がどんどん増えていきますね。このようにとてもシンプルなアプリですが、無事に立ち上げることができました。
スクリーンショット 2020-12-28 9.01.15.png

##Xcodeのインストール
続いてiOSでも同じようにアプリを起動してみようと思います。App StoreからXcodeをインストールします。評価が低すぎてびっくりしますが、問題ないようです。ただかなり重く容量もあるのでかなり時間がかかります。
スクリーンショット 2020-12-28 9.06.19.png

とりあえずFlutterを触ってみたかっただけという方は、Androidまでで十分かもしれません。
また、XcodeはMacユーザー限定です。Windowsでも何か方法はあるみたいですが、ここでは触れません。

##iOSアプリの起動
インストールが完成すれば一度開いてみてください。少し指示に従って入力する必要がありますが、とても簡単なので安心してください。

Android Studioを再度開き、AOSP on |A Emulator(mobile)をクリックし、Open iOS Simulatorを選択します。iOSの仮想デバイスが立ち上がったかと思います。Androidと同じように実行してみましょう。さっきと同じようなアプリが起動していればOKです。
スクリーンショット 2020-12-28 9.14.26.png

ここまでお疲れ様でした。

同じソースコードのままで簡単にAndroid・iOSと立ち上げることができるのです。まさにこれがFlutterの最大の特徴だと思います。

また、Flutterの公式サイトには、Showcaseの中にFlutterで開発された有名アプリサービスが載っています。ぜひ参考にしてみてください。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?