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

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

2019年6月2日【Flutter基礎】macOSへ開発環境を構築する【VScode】

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

シミュレータの準備をする
- iOS
- Android
Flutter appを作る
シミュレータを起動する

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

実機を繋いでアプリとして起動させることもできますが、（特に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を押して変更を保存します。