FlutterでHello World!

環境構築後、やることと言ったらHello worldというのがこの世界の習わしでするので、
前回環境構築で終わったとこから進めてみようと思います。

環境

OS: Mac OS X 10.13.3
Text editer:VSCode 1.20.1 
Flutter: Flutter 0.1.5 • channel beta

main.dart

Flutter環境構築後のフォルダ構成は以下のようになっています。

terminal

$ tree .

.
├── README.md
├── android
├── android.iml
├── build
│   ├── app
│   ├── app.flx
│   ├── flutter_assets
│   ├── ios
├── ios
├── lib
│   └── main.dart
├── myapp.iml
├── myapp_android.iml
├── pubspec.lock
├── pubspec.yaml
└── test
    └── widget_test.dart

treeコマンドしたらたくさん表示されたので一部割愛してあります。

今回編集したいのはlibフォルダ配下のmain.dart

├── lib
│   └── main.dart

Hello world

一度main.dartの中身を全削除し、次のコードに書き換えます。

main.dart

import 'package:flutter/material.dart';

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

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

そしてビルド、実行(VS CodeではF5ボタン押下)すると、、、

シンブルなHello Worldが出来上がりました。

Hot Reload

Flutterの特徴の一つにHot Reloadというものがあります。
これが何かというと、
エミュレータを起動したまま内容の変更ができる、というもの
試しにエミュレータを起動した状態(上のようにアプリが立ち上がっている状態)で、
上記コードのHello worldの部分をHello Flutterなどに変更し、
保存してみると、、、

すぐに反映してくれました。
これは素敵です。

おまけ

画面の色が白では物足りない方は
main.dartの11行目あたりに

main.dart

backgroundColor: Colors.blue,

backgroundColorを追加してあげるともう少し遊べそうです。