前回、Visual Studio Code（VSCode） に flutter をインストールするところまで完了しました。
今回は、サンプルプログラムを動かしてみようと思います。
サンプルプロジェクトを作成する
VSCode で 「表示」->「コマンドパレット」を選択するか、Ctrl + Shift + P を押すとコマンドパレットが開きます。「flutter」と入力すると、『Flutter: New Project』が選択できるはずなので選択します。
このとき、設定に不備があれば下図のように右下に注意文が表示されますので、対応してください。
ちなみに、下図はFlutter SDKが見つからないと言っているので、「Locate SDK」で場所を教えてあげました。
気を取り直して、プロジェクトを作成すると下図のように何を作成するのか聞かれます。
とりあえず動かしたいので「Application」にしておきます。
続いて、プロジェクト名を入力するように言われます。今回は、デフォルトのまま進めます。
任意のプロジェクト名に変更してかまいません。
プロジェクト名を決めると、いろいろと動いてプロジェクトが生成されます。
プロジェクトの生成が完了すると “main.dart” が表示されます。ここまで確認出来たら完了です。
とりあえず実行してみる
「実行」->「デバッグの開始」を選択するか、「F5」キーを押下します。
Chromeが起動して以下のような画面が表示されたら、サンプルプログラムの実行は成功です。
このプログラムは、右下の ＋ ボタンをクリックするたびに画面中央のカウンターが増えるプログラムです。
ターゲットを変えてみよう！
VSCode のステータスバーの右端に「Chrome (web-javascript)」という表記があります。
Chromeの文字をクリックすると、デバイスの選択メニューが表示されます。
Android Studioで エミュレーター を作成していると、ここでも表示されるようです。
今回は、「Create Android emulator」を選択してみましょう。
少し時間は掛かりますが、下のようなAndroid画面が表示されます。
ターゲットの表記も Android SDK に変わっているので、このままF5でデバッグ実行してみます。
Android Emulator に Chrome の時と同じサンプルプログラムが表示されるはずです。
Android Emulator の画面が黒くなったら
Android Emulator を無操作で放置しておくと、画面が真っ暗になります。
スマホと同じでスリープ状態になっているだけなので、Emulator横に表示されている電源ボタンを押せば再び表示されます。
最後に
Flutter プロジェクトが実行できることを確認できました。
一つのプログラムで、いろんなデバイスに対応できるのはとっても楽ですね。
iOSにも対応できるはずですが、あいにくMacを持っていない。
Androidアプリが開発出来たら、iOSもなんとかしたいと思っています。
さて次回は、プログラムを変更してみたいと思っております。
ちなみに、Flutter はホットリロードに対応しているそうなので、その点も確認できれば良いなと思います。
コメント