k01ken’s b10g

He110 W0r1d!

Flutterを始めてみる

開発環境はWindows 10 Pro(64bit)。

1.公式サイトへアクセス
flutter.dev

2.右上のGet Startedをクリック
f:id:k01ken:20210321225529p:plain

3.Windowsをクリック
f:id:k01ken:20210321225615p:plain

4.Get the Flutter SDKの欄のflutter_windows_x.x.x-stable.zipのボタンをクリック(ファイルサイズは697MBあります)
・今回は、バージョン2.0.3-stableをダウンロードします。
f:id:k01ken:20210321225813p:plain

5.ダウンロードが完了したら、解凍し、Cドライブ直下に、srcという名前でディレクトリを作成し、その中に、解凍した中に入っているflutterディレクトリを移動させます。

6.flutterディレクトリ内のbinディレクトリに環境変数PATHを通すために、環境変数の設定を行います。Windowsキー + Rキーで、ファイル名を指定して実行ウィンドウを開き、sysdm.cplと入力し、OKボタンをクリック。詳細設定タブの環境変数ボタンをクリック。

7.上部の~のユーザー環境変数のPathを選んで、編集ボタンをクリック。新規ボタンをクリックし、C:\src\flutter\binと入力して、環境変数名編集ウィンドウのOKボタンをクリックし、環境変数ウィンドウのOKボタンをクリックする。

8.コマンドプロンプト上で、flutterと入力してみて、以下のようなものが表示されたらOK。
※ちょっと時間がかかります。
f:id:k01ken:20210322000129p:plain

9.とりあえず、Test driveを参考にしてプロジェクトを作ってみたいので、Cドライブへ移動して、以下のコマンドを入力する

flutter create myapp
cd  myapp

10.Google Chromeがすでにインストールされていることが前提として、以下のコマンドを入力

flutter run

f:id:k01ken:20210322214144p:plain

Chromeで実行を確かめたいので、Please choose one~では、1と入力。すると、自動で実行されます。しばらく、Enterキーを押すと、Chromeが自動実行します。

f:id:k01ken:20210322214306p:plain

右下の十字をクリックすると、数字がカウントしていくアプリが表示されました。

11.ソースコードを見るために、カレントディレクトリに作成されているlibディレクトリ内のmain.dartというファイルを開いてみてください。
_MyHomePageStateクラス内のYou have pushed the button this many times:と書かれたテキスト部分を、Push me:という風に変更して、コマンドプロンプト上で、Rを押すと、自動で、変更を反映してくれます。
f:id:k01ken:20210530001252p:plain

■関連リンク
Flutter documentation - Flutter
・公式サイトのドキュメント。