FlutterのWidgetの基礎part2

はじめに

前回に引き続きFlutterの基本的なWidgetについて書いていきます。

Container Widget

Container Widgetは、画面上にボックス空間を確保するWidgetです。
用途は文字通りコンテナで、HTMLのdiv要素のように領域確保したり他のWidgetを入れたりします。
Container Widgetの主要プロパティは以下のものがあります。

プロパティ	説明
width	領域の横幅を設定
height	領域の縦幅を指定
color	領域の色を指定
margin	領域のマージン幅を指定
padding	領域のパディング幅を指定
transform	領域を回転
child	子Widgetを設定
alignment	子Widgetの位置を指定

青色の正方形を描画するサンプル コード

Container(
    color: Colors.blue,
    width: 100.0,
    height: 100.0,
 )

Stateless Widget

Stateless Widgetは、状態(state)を持たないWidgetになります。
画面上の値を変更しようとしても画面は再描画されません。

サンプル コード

import 'package:flutter/material.dart';
import 'dart:math';

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

class StatelessDemo extends StatelessWidget {
  int checkNumber = 0;
  Random randomNumber = new Random();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('数字は　' + (chkNumber == 1 ? '1' : '0')),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.numbers_rounded),
          onPressed: () {
            chkNumber = rdmNumber.nextInt(2);
            print(chkNumber);
          },
        ),
      ),
    );
  }
}

StatelessWidgetクラスを継承したState Demoクラスを作成します。
継承することで、Stateless Widgetのメソッドやフィールドにアクセスできます。
オーバーライドする事で、クラス継承時に親クラスのメソッドと同じ名前のメソッドを子クラスで定義し直し、親クラスのメソッドではなく子クラスのメソッドが呼ばれます。

Stateful Widget

Stateful Widgetは、状態(state)を持つWidgetです。
画面上の値を変更したい場合に画面を再描画できます。

サンプル コード

import 'package:flutter/material.dart';
import 'dart:math';

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

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _StatefulDemo();
}

class _StatefulDemo extends State<MyHomePage> {
  int chkNumber = 0;
  Random rdmNumber = new Random();

  @override
  void initState() {
    print("初期処理");
     super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('数字は　' + (chkNumber == 1 ? '1' : '0')),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.attach_money),
          onPressed: () {
            setState(() {
              chkNumber = rdmNumber.nextInt(2);
            });
            print(chkNumber);
          },
        ),
      ),
    );
  }
}

まとめ

今回は、Container Widget、Stateless Widget、Stateful Widgetについて簡単にまとめてみました。
まだ理解しきれていない部分も多いので間違っている箇所あればぜひコメントいただけると幸いです。
最後までご覧いただきありがとうございました！