W-1.Center WidgetとContainer Widget

Widget(ウィジェット)を覚えようの第1回はCenter WidgetとContainer Widgetです。

Center Widgetは読んで字のごとく子のWidgetを中央に配置するウィジェットです。

少し細かく言うと縦方向と横方向の両方の中央になります。

Container Widgetはコンテナで要するに入れ物です。

HTML、CSSでbootstrapを使ったことがある方なら意味合いは分かるんじゃないでしょうか。

以下のコードではContainer Widgetでheight(高さ)とwidth(幅)を100に指定して、color(色)をred(赤)に指定しています。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

そうするとシミュレーターでは以下のように表示されます。

今回は分かりやすく説明するために赤い四角形が中央にあるだけですが、実際はこの中にテキストやボタンやいろんなWidgetを入れてレイアウトするために使われます。

もちろん図形を作るために使っても大丈夫ですよ。