【Flutter】Hello Worldの表示方法とそのクラス/Widgeの解説

最終更新日

Flutter_Hello_World

FlutterでHelloworld を表示する方法とそのクラス/Widgetを解説します。

Hello Worldの表示

とりあえず、今回使うコードです。

main.dartにそのまま張り付けてデバック&エミューレターで動かしてみてください。

import 'package:flutter/material.dart';
//実行する
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//buildの中身をMaterialAppに返す
    return new MaterialApp(
      title: 'Hello Wolrd',
      home: new Scaffold(
//アプリのバーに文字を描画させる。
        appBar: new AppBar(
          title:Text('Hello Flutter'),),
//アプリ内のコンテンツ
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}
Flutter_Hello-World

上記の画像のようになっていれば成功です。

クラス/Widgetの解説

今回使用したクラス/Widgetは

クラス:

アプリの見た目を作用する

Widget:

パーツを配置しているイメージ

関数:

実行に必要不可欠な物

です。(メソッドの分類は分かりやすいよう関数にしております。)

参考

初学者にとってクラスWidgetなどの使い方を一度に理解するのは難しいので、

少しづつ慣れていくのが一番です。

今回の記事で使用したクラス/Widget/material library の関係は以下の画像のようになっています。

クラスの役割について:

Flutterにおけるクラスの役割

Widgetについて:

Widgetと

関数について:

【Flutter/Dart】main()とrunApp()とは?

fem