省エネエンジニア

効率よく稼ぎたい!

【Flutter】開発をはじめる為に必要なこと

アプリ開発を始める為に必要なこと。
それは、開発環境を整える必要があるということです。

私のおすすめはAndroidStudioを使う方法です。
しかし、これは単に私がAndroidStudioを使い慣れているだけだからかもしれませんけどね。

この記事では、AndroidStudioでの開発環境の作り方をご紹介したいと思います。

環境はwindows 10 home エディションです。
macでもさほどやり方は変わらないです。

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

ここからAndroidStudioをダウンロードします。
ページを開くとどんなOSを使っているか勝手に判断してくれるので何も考えずにダウンロードボタンを押せばOKです。

ダウンロードしたexeファイルをダブルクリックしたらインストール完了です。
表示されるモーダルは何も考えずに「Next」連打で大丈夫です。

初めてAndroidStudioを起動した場合は、起動後に表示されるモーダルは「Do not import settings」でいいと思います。

SetUpはデフォルトで問題ないかと思います。
後からいくらでもなんとでもなるので。

f:id:qkuroneko:20190222221711j:plain:w460

この画面が開いたら右下のConfigureを押しPluginsを選択します。

f:id:qkuroneko:20190222222053j:plain:w460

この画面の赤枠のボタンを押して、Flutterを検索します。

f:id:qkuroneko:20190222222318j:plain:w460

Flutterをインストール。
この時にDartも一緒にインストールされます。

インストールが終わったら、AndroidStudioを再起動します。

f:id:qkuroneko:20190222223143j:plain:w460

Flutter Projectを作るためのメニューが増えてると思います。

こちらを選択して、さっそくFlutterProjectを作っていきましょう。

Flutter Applicationを選択してNext。

f:id:qkuroneko:20190222223503j:plain:w460

Flutter SDK Pathに何も書かれていない状態だと思いますので、横にあるView setup docs...をクリックしてSDKがダウンロードできるページを開きましょう。
mac版の場合はここがInstall SDKとなっていて、ここをクリックすることでFlutterSDKをインストールできます。

f:id:qkuroneko:20190304143543j:plain

インストールしたFlutterSDKのパスを入れます。

f:id:qkuroneko:20190304145422j:plain

パスを設定したら、「Next」ボタンを押してアプリを作成しましょう。

プロジェクトができたらとりあえず動かしてみたいですよね。

f:id:qkuroneko:20190304150113j:plain

Tools->ADVManagerを起動し、エミュレータを選択します。

エミュレータは左下の「Create Visual Device..」から作成できます。

f:id:qkuroneko:20190304152057j:plain

エミュレータを起動した状態だと、画像の赤枠のところで選択できるようになります。
青枠のスタートボタン(又はShift+F10)を押すとビルドが始まり、自動的にエミュレータにアプリをインストールしてくれます。

f:id:qkuroneko:20190304162709j:plain:w320

最初から書かれているコードを実行するとこんな画面になります。
右下のFABをタップしていくことで中央の数字がカウントされていきます。

ここまでできれば環境構築完成です。
これですぐにでも開発が始められますね。
iOSシミュレータでももちろん実行できます。
シミュレータを起動すると、先ほどの画像の赤枠のところで選択できるようになるので、iOSシミュレータを選択してスタートボタンを押せばiOSシミュレータで起動することができます。