【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part19 Single-child layout widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part19 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part18 Single-child layout widgets

引き続き、Single-child layout widgetsについて学びます。

Single-child layout widgets

Containerウィジェット

alignmentプロパティ

alignmentプロパティはchildプロパティの位置を指定します。
なので・・・以下のようにしても期待した結果にはなりません。
また、幅・高さを表示可能サイズよりも小さくしないとやはり期待した結果にはなりません。

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // ColorではなくてColors!
        body: Container(
          alignment: Alignment.center,
          color: Colors.greenAccent,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

以下のような結果になります。
上下左右中央揃えを期待したのですが左上にContainerオブジェクトが表示されています。

childプロパティをきちっと設定すれば、childプロパティに対しての位置を整えてくれます。

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // ColorではなくてColors!
        body: Container(
          alignment: Alignment.center,
          child: Container(
            color: Colors.greenAccent,
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

これで期待した通りの動作になりました。

ちなみに、以下のように実装するとどうなるでしょう?

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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),

        // このコンテナは左上
        body: Container(
          alignment: Alignment.center,
          // 子供は中央揃え・・・どうなる?
          child: Container(
            color: Colors.greenAccent,
            width: 50,
            height: 50,
          ),
          color: Colors.pinkAccent,
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

こうなりました!
大枠のコンテナは左上に。そのコンテナにの中央にChildのコンテナが表示されています。

最後に

alignmenプロパティはAlignウィジェットやCenterウィジェットで代替できるそうです。

今日はここまで!