【Flutter】Hello Worldをコンソール出力・スクリーン表示

Flutter初心者向けに「Hello World」をコンソールで出力、アプリでスクリーン表示する方法を紹介します。

本記事はFlutterの新規プロジェクトを作成してこれからFlutterで初めてアプリ開発を行なっていく方向けの記事です。Flutterの環境構築が済んでいない方は先にこちらの記事をお読みください。

\ 世界最大級のオンライン学習サービス /

目次

Dartコードは何ファイルに書く?

Flutterアプリ開発で使用されるDart言語はdart(ダートファイル)に記述します。Flutterの新規プロジェクトを作成するとmain.dartが自動生成され、新しいファイルは〇〇.dartとして生成します。

今回はmain.dartで「Hello World」をコンソール出力した後で、テキストをアプリのスクリーンで表示していきます。

dartファイル(main.dart)はどこにある?

main.dartはFlutterプロジェクト直下のlibにあります。

このlibでFlutterアプリ開発で使用するdartファイルを管理します。

main.dartのデフォルトコードをビルドしてみる

Flutterの新規プロジェクトを作成するとmain.dartにデフォルトで「カウンターアプリ」のコードが書かれているので一度試しにビルドしてみるのがオススメです。

それではmain.dartのコードは全て削除してコードを書いていきます。

Hello Worldをコンソール出力

上記コードをmain.dartにコピペして実行(アプリをビルド)すると「Hello World」がコンソールで出力されます。

Dartでコンソールに文字列を出力するにはprintを使用します。

main関数とは?

void main() {
  print('Hello World');
}

ここでFlutterアプリ開発をする上で必須となる「main関数」について解説しておきます。

main関数とは、Flutterアプリビルド時のエントリーポイントとなる関数でmainで書いた処理が順に実行されます。今回の場合はmainで書かれたprintが実行されています。

main関数はmain.dartファイル以外で使えない

Flutterアプリ開発で必須であるmainmain.dart以外のdartファイルで使用できず、常にセットで使用されます。

それでは次にFlutterアプリのスクリーンで「Hello World」テキストを表示させていきます。

Hello Worldをスクリーン表示

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Center(
        child: Text('Hello World'),
      ),
    ),
  );
}

まずは上記コードをmain.dartにコピペしてFlutterアプリをビルドしてみてください。

すると下画像のような黒色背景の中央に「Hello World」とテキスト表示されます。

「Hello World」を表示できたところでポイントを順に解説していきます。

runApp関数とは?

void main() {
  runApp(MaterialApp(省略...));
}

今回はmainのエントリーポイントがrunAppです。

そしてこのrunAppはFlutterアプリを構築するウィジェットツリーの始まり(ルート)となるWidget(ウィジェット)を指定し、スクリーンで表示できます。

Widget(ウィジェット)とは?

Widget(ウィジェット)とはFlutterアプリのUIを構築するパーツです。

右上図の例のように複数のWidgetがツリー状に組み合わさっていることを「ウィジェットツリー」と呼び、右上図のルートはMyAppとなります。

void main() {
  runApp(MaterialApp(省略...));
}

よって上記コードではrunAppMaterialAppをウィジェットツリーのルートとしています。

スクリーンで表示されないWidgetもある

runApp(
  MaterialApp(
    home: Center(
      child: Text('Hello World'),
    ),
  ),
);

上記コードではrunAppMaterialAppをウィジェットツリーのルートとしており、他にCenterTextウィジェットが使用されていますが、実際にスクリーンで表示されているのはTextのみです。

なぜならWidgetにはボタンやテキストなどスクリーンで「描画されるWidget」と、レイアウトなどの「描画されないWidget」があるからです。

  • MaterialApp:materialコンポーネントを使用する上で必須
  • Center:ラップしたWidgetを中央表示
  • Text:テキスト表示

MaterialAppmaterialコンポーネントScaffoldなど使用する上で必須なWidgetです。Centerは指定したWidgetを中央表示できるレイアウト用のWidgetです。

MaterialAppの詳細については下記事をお読みください。

Widgetを使用するにはパッケージが必要

import 'package:flutter/material.dart';

Widgetを使用するには上記コードのようにパッケージを導入する必要があります。

今回使用しているMaterialAppTextなどは上記コードで導入したパッケージのmaterialライブラリのWidgetです。パッケージとライブラリの違いなど詳細がが知りたい方は下記事をお読みください。

今回は以上です。

一緒に読みたい

参考

  • URLをコピーしました!
目次