はじめに
これはFlutterでHello Worldを出したい人向けにかいてます。
Flutterというのは、Googleによるクロスモバイル用のフレームワークです。
クロスプラットフォームなので、Android,iOS,Webのどれでも動作します。
GoogleI/Oでも結構取り上げられ、熱い分野です。
環境構築
Get Started
Flutterについては、公式ドキュメントが充実しているので、
それをよみつつ作業するのが一番早道だとは思いますが、
以下に簡単な流れだけ書いときます。
1.各種インストール
1.0 システム要件確認
Gitがはいっているか、コマンド叩けるかどうか。
1.1 SDK入手
Flutter SDK Archive
上記リンクからFlutterSDKを入手。
解凍してパスを通す。パスが通ったら(=flutterコマンドがうてるなら)
$ Run flutter doctor
コマンドで、flutter doctorを起動する。
これが優れもので、必要な起動条件をコマンドラインベースで教えてくれる。
1.2 AndroidStudio入手
入っているならば次に進む。
VisualStudio/IIJでも動くけども、公式ではandroidStudioにてメイン説明されてる。
(必要ならば)エミュレータもいれる。
2 AndroidStudioに設定加える（=プラグイン入れる）
入れるものは[Flutter][Dart]のふたつのプラグイン。
File>Settings>Plugins でプラグイン画面にいき、
Browse repositories… で[Flutter][Dart]を探す。
ここまでの設定がきちんとできれば、プロジェクトが作れる状態になる。
3 Hello Worldをかこう。
3.1 プロジェクト作成
File > New Flutter Project とかで、新規プロジェクトを立ち上げる。
テンプレート選択は、Flutter application にしとく。
プロジェクト名と組織名が聞かれるので、適当に埋める。
Finish ボタンを押すと、自動的にファイルが生成される。
すこし待つと、プロジェクトおよびファイルできる。
3.2 main.dartを書き換える。
プロジェクトのメインファイルは[main.dart]で、lib/maindart に存在する。
それを書き換えていろいろ作っていく。
以下が、HelloWorldのプログラムとなる。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Hello Wolrd',
home: new Scaffold(
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
以上をRun > main.dartすると起動する。
3.3 Hello Flutter World!
3.4簡単に説明
main.dart を起動すると、main()がよばれて、
MyAppインスタンスをrunApp()にわたす。
全体のViewをStatelessWidgetが司っていて，Viewをbuildしている。
MaterialAppがtitlebodyなどのプロパティを持っていて、
それぞれに任意のview widgetを渡すことで画面を描画している。
感想
やってて楽しい。
英語読めればもっと楽しい。
Javaライク？