前回、前々回と Flutter の開発環境構築〜実行まで行いました。
ただ、Flutterプロジェクトをが出来上がった直後のプログラムが Hello World と思いきや、最初からボタンとテキスト表示とカウント機能がある状態からのスタートになっていました。
今回は、シンプルに Hello World だけを表示する状態に削ぎ落として見ます。
更に、それだけだとつまらないので SwiftUI での Hello World と比較もして見ます。
【Flutter】Hello World プログラム【SwiftUIと比較】
先ず、プロジェクト生成時に作成される main.dart のデフォルトコードは以下の通りです。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}上記を、最低限の Hello World だけの表示にコードを削ぎ落として状態が以下です。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'hello_world',
home: new Scaffold(
body: new Center(
child: new Text("Hello World!"),
),
),
);
}
}だいぶスッキリした印象です。
Google のプラットフォームなので、何となくですが、Android（Java・Kotlin）の雰囲気に似ていますね（extends、Widget、context と言った単語など ）。
軽く内容にも触れておきます。
void main() => runApp(MyApp());
プログラムのエントリーポイントを指定しているようですね。iOS（Swift）で言うと、AppDelegate で rootViewController を設定しているようなイメージかと思います。
class MyApp extends StatelessWidget {}
iOS の UIViewController（SwiftUI だと View）、Android の Activity と言って良いかと思います。
MaterialApp()
アプリケーションそのものを生成しているイメージですね。
title: ‘hello_world’ の部分がアプリの名前（アイコン名）になっているようです。
body:
レイアウトを定義する部分ですね。
今回の例では Center レイアウトの child: に Text（Hello World!）を設定しています。
最後に、SwiftUI の Hello World と比較して見ましょう。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World!")
}
}う〜ん、Flutter と比べると圧倒的にスッキリしていますよね。
エントリーポイントのやアプリ名の設定は他のソースに移譲しているので一概には言えないかもしれませんが、
初見で見ると、やっぱり、View 部分のコーディングでは SwiftUI に軍配が上がります！
Apple が クロスプラットフォームの言語を作ったらそっちに乗り換えるかも。
と言うか、Swift で Android 開発出来たらいいのに・・・。
おわり
コメントを残す