Flutterをはじめるにあたって、公式から公開されている”Hello World”アプリを作成するまでの手順と実行方法、コードについて解説します。
Contents
Hello Worldアプリを作ってみる
新規Flutterプロジェクトを作成
「Andoroid Studio」を立ち上げ、「Start a new Flutter project」を選択します。
左端にある「Flutter Application」を選択した状態で、「Next」ボタンをクリックします。
「Project name」にプロジェクト名を任意に入力します。
今回は「hello_world」と入力し、「Next」ボタンをクリックします。
最後に「Package name」を入力するよう促されますが、今回はあまり関係ないので初期状態のまま「Finish」をクリックします。
プロジェクトが作成され下記のような画面が表示されればOKです。
このまま実行するとカウンターアプリが起動しますので、「Hello World」を表示するだけのアプリを作っていきましょう。
コーディング
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'),
),
),
);
}
}
実行
プログラムを書き終えたら実行してみます。
「Android Studio」の画面上部右側にある選択肢からエミュレータを選択し、実行ボタンをクリックします。
エミュレータが起動してない場合は「Open ~」をクリックすると、エミュレータが起動しますので起動後に改めて選択し直して実行しましょう。
無事に起動できると画面中央に「Hello World」と表示されているアプリが起動します。
実際に実行している様子を撮りましたので、参考にしてみてください。
コードの解説
今回作成した「Hello World」アプリで使われているコードを上から見ていきましょう。
1行目：import ‘package:flutter/material.dart’;
importは指定したファイルに定義されてあるクラスや関数を利用するためのキーワードです。
material.dartファイルにはexportキーワードで他のファイルも参照できるようにしているため、material.dartだけをインポートすればFlutterパッケージに定義されている他のクラスや関数も利用できるようになります。
package:flutter/material.dartにカーソルを合わせた状態で「command + B」を入力するとmaterial.dartファイルを参照できます。
「Ctl」を押した状態でmaterial.dartファイルを参照するにはをクリックすると、メニューが開くので「Go To > Declaration or Usages」をクリックすることでもファイルが開きます。
3行目：void main() => runApp(MyApp());
main関数はDart言語で定義されている関数です。
すべてのアプリはトップレベルの関数を持つ必要があり、それがmain()関数になります。
runApp関数は与えられたWidgetを画面に描写する関数です。
https://api.flutter.dev/flutter/widgets/runApp.html
引数に与えているMyAppクラスはWidgetを返すクラスになります。
5行目：class MyApp extends StatelessWidget { ~ }
MyAppクラスを定義し、それはStatelessWidgetを継承しています。
runAppの引数に与えるクラスはStatelessWidgetを継承している必要があります。
6行目：@override
@overrideアノテーションは明示的に継承元のメンバーをオーバーライドしていることを示すものです。
ちなみにオーバーライドとは継承元の親クラスで定義されたメソッドを子クラスで定義し直し、動作を上書き（変更）することです。
今回のケースで例えると、親クラスであるStatelessWidgetが持つbuild関数を子クラスのMyAppが上書きしていることがわかります。
7行目：Widget build(BuildContext context) { ~ }
StatelessWidgetが持つbuild関数の動作を再定義しています。
BuildContextは説明が長くなるため、今回は割愛します。
詳しく知りたい方はこちらへ。
8行目：MaterialApp
MaterialAppクラスはマテリアルデザインを利用したアプリケーション（Widget）を提供します。
10行目：Scaffold
Scaffoldとは直訳すると「足場」です。
Scaffoldウィジェットはいくつかの異なるウィジェットを受け取ることが可能で、それぞれが適切な場所に配置されます。
Scaffold class – material library – Dart API
11行目：AppBar
AppBarウィジェットは名前の通り、アプリケーションの上部に設置されるバーです。
AppBar class – material library – Dart API
14行目：Center
Centerウィジェットはchildに指定されたウィジェットをセンタリングするウィジェットです。
Center class – widgets library – Dart API
12、15行目：Text
Textウィジェットは文字列を表示するウィジェットです。
また、レイアウトやスタイルの指定も可能です。
