note 毎日更新してます

FlutterでHello Worldをしてみる【初心者】

前回の記事ではmacOSへFlutter開発の環境を整えました。

【Flutter基礎】macOSへ開発環境を構築する【VScode】

今回はFlutterを使ってスマホの画面に「Hello World」を出力してみましょう。

シミュレータの準備をする

実機を繋いでアプリとして起動させることもできますが、(特にiOSでは)面倒なのでmac上のシミュレータで代用します。

iOS

iOSに関してはXcodeをインストールした時に最新のシミュレータが自動で入ってくるはずなので気にしなくても大丈夫です。

Android

Android studioを開いてください。

右下の設定より、AVD Managerをクリックします。

以下のような画面に遷移すると思うので、「+ Create Virtual Device..」をクリック。

シミュレートするデバイスを選択します。

なるべく新しい端末にしましょう。今回はPixel 3を選びました。

続いてOSのバージョンを決めます。

API Levelの数値が一番大きいものを選びましょう。

「finish」をクリックしたら完了です。

Flutter appを作る

Android studioはもう終了させても大丈夫です。

これからはVScodeでの作業にうつります。

cmd+shift+Pを押して「flutter new project」と検索し、同じものをクリックしてください。

次の入力枠にはアプリ名を入れます。

今回は「myapp」と入れてみましょう。

少し待つと画面左側になにやらいろんなものが並んだかと思います。

その中から「lib」を探してクリックすると「main.dart」なるものがあるはずです。そいつをダブルクリックしてください。

画面真ん中にたくさんの文字列が並びました。

そいつを全て消して以下に書き換えてください。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

書き換えをしたら、cmd+Sを押して変更を保存します。

シミュレータを起動する

続いて先ほど準備したシミュレータを起動します。

VScode内右下にある「No Device」と書かれた場所をクリックしてください(もしくは、fn+F5を押す)。

するとデバイス名が表示されるので、今回はPixel 3を選んでみましょう。

デバイスが起動したら、VScodeに戻ってステータスバーより「Debug→Start Debugging」を押します。

画面に「Hello World」が表示されたら目標の達成です。

お疲れ様でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です