Flutterで"Hello World"アプリを実行するまでと解説

September 26, 2020

Flutterをはじめるにあたって、公式から公開されている”Hello World”アプリを作成するまでの手順と実行方法、コードについて解説します。

Hello Worldアプリを作ってみる

新規Flutterプロジェクトを作成

「Andoroid Studio」を立ち上げ、「Start a new Flutter project」を選択します。

flutter_helloworld-create1

左端にある「Flutter Application」を選択した状態で、「Next」ボタンをクリックします。

flutter_helloworld-create2

「Project name」にプロジェクト名を任意に入力します。

今回は「hello_world」と入力し、「Next」ボタンをクリックします。

flutter_helloworld-create3

最後に「Package name」を入力するよう促されますが、今回はあまり関係ないので初期状態のまま「Finish」をクリックします。

flutter_helloworld-create4

プロジェクトが作成され下記のような画面が表示されればOKです。

flutter_helloworld-create5

このまま実行するとカウンターアプリが起動しますので、「Hello World」を表示するだけのアプリを作っていきましょう。

コーディングlib/main.dartにカウンターアプリのプログラムが記述されているので、全て削除し下記のコードが書いてみましょう。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    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 ~」をクリックすると、エミュレータが起動しますので起動後に改めて選択し直して実行しましょう。

flutter_helloworld-execute

無事に起動できると画面中央に「Hello World」と表示されているアプリが起動します。

flutter_helloworld-application

実際に実行している様子を撮りましたので、参考にしてみてください。

flutter_helloworld-execute-gif

コードの解説

今回作成した「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」をクリックすることでもファイルが開きます。

flutter_helloworld-materialdart

3行目:void main() => runApp(MyApp());

main関数はDart言語で定義されている関数です。

すべてのアプリはトップレベルの関数を持つ必要があり、それがmain()関数になります。

Language tour | Dart

runApp関数は与えられたWidgetを画面に描写する関数です。

引数に与えている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)を提供します。

material library - Dart API

10行目:Scaffold

Scaffoldとは直訳すると「足場」です。

Scaffoldウィジェットはいくつかの異なるウィジェットを受け取ることが可能で、それぞれが適切な場所に配置されます。

Scaffold class - material library - Dart API

11行目:AppBar

AppBarウィジェットは名前の通り、アプリケーションの上部に設置されるバーです。

AppBar class - material library - Dart API

14行目:CenterCenterウィジェットはchildに指定されたウィジェットをセンタリングするウィジェットです。

Center class - widgets library - Dart API

12、15行目:TextTextウィジェットは文字列を表示するウィジェットです。

また、レイアウトやスタイルの指定も可能です。

Text class - widgets library - Dart API

CONTACT

お問い合わせ

ECサイトやホームページの構築、保守・運用方法に課題を感じている方、まずはご相談ください。

お問い合わせ