【Flutter】簡単導入~サンプルアプリのデバック起動まで【日本語】

備忘録ついでにFlutterの導入手順について簡単にメモしていきます。

本記事でサンプルアプリのデバック起動までやります。

所要時間30分~60分程度。

他のプログラミングに関する記事はこちら

スポンサーリンク

前提

Android StudioとVisual Studio Codeを導入しておく必要があります。

本ブログでも以下の通り過去にまとめているので、もし上記2つを導入していない場合は以下をご参考にいれておいてください。

【AndroidStudio】簡単導入~エミュレーター作成まで【日本語】

PCを買い替えたので、備忘録ついでにAndroid Studioの導入手順について簡単にメモしていきます。 本記事でエミュレーターの作成までいきます。 他のプログラミングに関する記事はこちら スポンサーリンク […]

IMG
【Visual

PCを買い替えたので、備忘録ついでにVisual Studio Code(以下VSCodeと呼称)の導入手順について日本語で簡単にメモしていきます。 といっても、導入だけならものの数分で終わりますが。 他のプログラミングに関する[…]

IMG

※AndroidStudioを導入する際にはエミュレーターまで作っておくと、この後が楽です

スポンサーリンク

早速Flutterの導入をしてみる

1.以下サイトにアクセスします。

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

 

2.今回はWindows環境で作成していく予定なので、以下赤枠をクリックします。

 

3.Gitを導入していきます。以下赤枠をクリックします(既にGit導入済みならGit導入は不要)

 

4.リンク先で手に入るexeを実行してインストールします。Next連打でいいと思います。

 

5.インストール後、コマンドプロンプトで「git –version」コマンドを実行します。正常にインストール出来てればversionが表示されます(Git導入完了)

 

6.Flutterのサイトに戻ります。以下赤枠をクリックします。

 

7.flutterのzipをダウンロードします。

 

8.解凍します。解凍したら任意のフォルダに移動します(今回はCドライブ直下に移動しました)

 

9.Flutterフォルダのパスを通します。

 

10.(今回はCドライブ直下に置いた)Flutterフォルダ内にあるflutter_consoleを起動します。

スポンサーリンク

11.flutter doctorコマンドを実行します

 

12.flutter doctorはflutter導入のための診断をしてくれるコマンドです。今回の場合は、!(警告?)が2つ、×(エラー)が3つあったので、それぞれ解消していきます。

 

13.Some Android licenses not acceptedを解消します。引き続きflutter_consoleで「flutter doctor –android-licenses(※)」コマンドを実行し、y連打します
※WordPressの機能?により自動的に補正されてしまっていますが、上記コマンドの「android」の前はハイフンを2つ繋げます

 

14.上から1つ目と2つ目の×を解消します。どちらもAndroid Studioに必要なプラグインがないよっていう内容ですので、Android Studioに必要なプラグインを導入するため、Android Studioを起動しメニューバーのFile>Settingsを選択します。

 

15.Pluginsタブを開き、Flutterと検索してFlutterをインストールします。このインストールでFlutterとDartというFlutterを使うのに必要な2つがインストールされます。

 

16.インストール完了後は「Restart IDE」をクリックしてAndroid Studioを再起動させます。ここまでしないとインストール済み扱いにならないです。

 

17.Android Studio側のエラーの修正は終わったので、次はVisual Studio Codeのエラーを修正していきます。こちらもFlutterに必要なものがインストールされていないよ、というエラーです。flutter doctorで表示された以下赤枠のサイトを表示します。

 

18.installをクリックします(これをクリックするときにはVisual Studio Codeは起動しないでおいてください)

 

19.前手順のinstallをクリックすると自動でvisual studio codeが立ち上がり以下画面が表示されます。再度installをクリックします。

 

20.以上でFlutterの導入は完了です。flutter doctorを実行すると全エラーが解消されていることが確認できます。
ちなみに残っている1つの警告「No devices ~~~~」ですが、これは端末をPCに接続してると解消される……らしいです(やってみてないからわからない)
一先ず、解消していなくても問題はないっぽいですので、これで進めていきます。

スポンサーリンク

21.早速試しにサンプルアプリを1つ起動してみます。ここではFlutter導入時に自動的に作成されるアプリを起動させます。Visual studio codeのメニュー「View」>Command Paletteをクリックします。

 

22.flutterと入力します。表示された予測から、New Projectを選択します。

 

23.Project名を入力します。今回はmyappという名称で作ります。

 

24.どこにProject関連のファイルを作成していくか選択します。一先ずデスクトップ上にflutterというフォルダを作り、そこにprojectを作成してみることにします。

 

25.Projectの作成が自動で始まりますので、main.dartというものが表示されるまでひたすら待ちます。main.dartが表示されたら、この時点で自動的に作成されるサンプルアプリが出来てます。早速、試しにエミュレーターで起動します。画面右下にある「No Device」をクリックします。

 

26.Android Studioで作成したエミューレータ一覧が表示されます。今回は事前にflutterという名称のエミュレーターを作成していますので、それを選択します。もしエミュレーターを作成していないという場合は、こちらの記事を参考に作成してみてください。

 

27.右下にエミューレーター名が表示されれば設定完了です。もしエミュレーターを初起動させる場合はタイムアウトエラーが出るので、その場合はエミューレーターを1回起動してみてから再度デバイスの設定をするとうまくいく……と思います。

 

28.エミューレーターの設定が完了したらF5を押します。そうすると画面下部のバーが朱色になったり、画面右上の方にエミュレーターに関するメニューが出たり、画面左上の方がデバックモードになって「Flutter」と表示されたりします(場合によっては画面左上の「Flutter」というのが未選択になっている場合があるようなので、その場合はFlutterを選択してあげる必要があるっぽいです)

 

29.この状態でしばらく待ってるとエミュレーターがProjectの内容を読み取ってアプリを起動してくれます。初回起動時は場合によりSDKとかダウンロードしてくれたりするので、起動まで時間がかかるときがあります。気長に待ってみてください。

 

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク