FlutterでHello Worldと表示させた

前回の記事でFlutterを使用して画面中央に「Hello World」を表示させました。

前回の記事はこちら

Hello Worldのコード解説
1. 上からコード解説していくよ

Hello Worldのコード解説

僕はプログラミングはある程度分かる全くの初心者ではないレベルです。

そんな僕が今後の自分の備忘のためにコード解説していきます。

間違っている部分もあるかと思いますが、気付いたら多分書き直すと思います。

上からコード解説していくよ

まず、全体のコードは以下の通りです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        home: Scaffold(
          body: Center(
            child: Text('Hello World'),
          ),
        ),
      );
    }
  }

1-1.以下の部分のコードは実行するにあたり、決まり文句の様なものなので最初のうちは何も考えずこれを入力しておきます。

import 'package:flutter/material.dart';

１-2.以下のコードも決まり文句の様なものなので最初のうちは何も考えずに入力して大丈夫だと思います。

void main() {
  runApp(MyApp());
}

※以降はカッコについてはあったりなかったりしますが、個別に解説していくうえで抜けただけなので気にしないでください。

1-3.以下のコードも最初のうちはスマホの画面を表示させるのに必要なコードなのでお約束として入力します。

  class MyApp extends StatelessWidget {

少し調べたところ、

・「class」は必ず入力
・「MyApp」はアプリ名なので任意の名前に変更可能
・「extends」は必ず入力するけど今はまだどういったものか分からない
・「StatelessWidget」は画面や挙動によって「StatefulWidget」というのと使い分けることができるそうです

1-4.以下のコードも最初のうちはお決まりのコードの様でjavaとかでも見かけましたがイマイチ用途が分かっていません。

    @override

1-5.以下のコードもほぼお決まりの様です。ただ、アプリによってはコードを変えたりして動きを付けることができると見た気がします。

    Widget build(BuildContext context) {
      return const MaterialApp(

1-6.以下のコードは画面を表示させるうえで必要となるコードなのだそうですが、他にも使えるコードがあり使い分けをすることができるそうです。

        home: Scaffold(

1-7.以下のコードは画面の構成を作るコードの様です。「body」はほぼ必ず使われるコードの様ですが「center」は置いたアイテムをどこに表示させたいかを決めるためなので他にも使えるコードがあるそうです。

          body: Center(

1-8.以下のコードは文字を画面に表示させるコードの様なのですが「child」の使い方がイマイチ分かっていません。多分「body」配下で使うのでしょうがいきなり「Text」じゃダメなの？と思ってしまいました。

            child: Text('Hello World'),

今回はここまで。

結局解説できるほど分かっていなかった。

少しずつできることを増やしていこう。

#2.1 Flutter | Hello Worldのコード解説～備忘覚え書き～

FlutterでHello Worldと表示させた

Hello Worldのコード解説

上からコード解説していくよ

コメント