Flutterメモ-21 (CenterウィジェットとRowウィジェットで中央表示）

概要
参考情報

概要

前回

devlights.hatenablog.com

という形で、CenterウィジェットとColumnウィジェットさんについて書いたので

ついでに CenterウィジェットさんとRowウィジェットさんについてもメモしておこうと思いました。

基本は同じです。なので、Rowウィジェットさんは可能な限り横幅を確保しようとしてくれます。

なので

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Row(
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

f:id:gsf_zero1:20210930180739p:plain

となります。

これを必要な分のみの確保にするには、Columnウィジェットの場合と同様に MainAxisSize プロパティを設定します。

import 'package:flutter/material.dart';

void main() {
  const _axisSize = MainAxisSize.min;

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: _axisSize,
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

f:id:gsf_zero1:20210930180931p:plain

MainAxisSizeの値はデフォルト(max)のままで、MainAxisAlignmentの値を中央（center) にした場合は以下のようになります。

import 'package:flutter/material.dart';

void main() {
  const _axisSize = MainAxisSize.max;
  const _axisAlign = MainAxisAlignment.center;

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.yellow,
            child: Row(
              mainAxisSize: _axisSize,
              mainAxisAlignment: _axisAlign,
              children: const [
                Text('hello world'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}