[Flutter] まずはHello, World!から

Flutterでの最初の一歩は、やはりHello, Worldからです。
実はFlutterのテンプレートプロジェクトでは、純粋なHello, Worldだけになっていなくて、ちょっとコード量がコメント共に多めに入っています。
そのため、どこが大事なところなのかすぐに追いにくいなーと感じました。

今回紹介するコードが一番ベースになると思いますので、こちらからスタートしたいと思います。

公式サイトでは、一番最小な状態のFlutterプログラムが公開されています。
https://flutter.dev/docs/development/ui/widgets-intro

FlutterはWidgetの組み合わせ

Android と考え方がかなり違っているため、まだつかみ切れていないところもあるのですが、Flutterでは画面と実装をWidgetという単位で書いていくスタイルです。
以下が一番最小で、画面上に”Hello World!”とテキストを表示するコードになります。

コード例

Android Studioでプロジェクトを作成した場合、プロジェクト上の lib/main.dart のコードとなります。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

解説

Flutterで最初に呼ばれるのが main() で、 runApp() にWidgetを渡すことで画面を構築していきます。
上記の例で渡しているのは Center()クラスで、画面上の中央にテキストを配置するWidgetです。
Centerのコンストラクタには名前付き引数が用意されていて、 child に子要素となるWidgetを設定できます。
https://api.flutter.dev/flutter/widgets/Center-class.html

ここでは、子要素にText()クラスを指定しています。
https://api.flutter.dev/flutter/widgets/Text-class.html

第一引数が表示するテキストで、指定した Hello, world!が画面上に表示されることになります。
第二引数の textDirection はテキストの開始位置を指定することができます。ここではTextDirection.ltrで、言語が英語圏のような、左から始まる言語へと対応した表示に対応しています。
他にも、TextDirection.rtlにすれば、ヘブライ語などの右側を開始位置とする言語にも対応できるため、多言語対応を進める際には参考になりそうです。
https://api.flutter.dev/flutter/widgets/Text/textDirection.html

実行結果

Android

iOS

iOS / Android 双方のエミュレータでの実行結果ですが、見た目はどちらも変わらない結果となりました。
Flutter素晴らしい！

引き続き実験して学んでいきたいと思います。