【Flutter】FractionallySizedBoxの使い方｜親ウィジェットに対する割合でサイズ調整する

2024年1月25日2024年1月30日

「親ウィジェットに対する割合で子ウィジェットのサイズを調整したい」

こんな時に便利なのが FractionallySizedBox ウィジェットです。

FractionallySizedBoxを使用することで親ウィジェットのサイズを100%として子ウィジェットのサイズを相対的割合で調整できます。

それではSizedBoxの基本的な使い方とカスタマイズ方法について解説していきます！

✔︎ レイアウトボックス一覧

基本的な使い方

FractionallySizedBoxの基本的な使い方について解説します。

親ウィジェットに対して相対的な割合でサイズ調整したい子ウィジェットをFractionallySizedBoxのchildプロパティの引数として渡し、FractionallySizedBoxのwidthFactorプロパティとheightFactorプロパティで親ウィジェットの大きさを1とした時の割合でサイズ調整できます。

仮に親ウィジェットの横幅が「300」、widthFactorを「0.5」とした場合、子ウィジェットの横幅は親ウィジェットの50%に当たる「150」になります。

またFractionallySizedBoxでサイズを調整した場合、子ウィジェットで指定したサイズは無効化されます。

Container(
  width: 300,
  height: 200,
  child: FractionallySizedBox(
    widthFactor: 0.5, //親ウィジェットの50%の高さ
    heightFactor: 0.8, //親ウィジェットの80%の横幅
    child: Container(
      width: 200, //無効化される
      height: 100, //無効化される
    ),
  ),
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 100,
            ),
            Container(
              color: Colors.amber,
              width: 300,
              height: 200,
              child: FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor: 0.8,
                child: Container(
                  width: 200, //無視される
                  height: 100, //無視される
                  color: Colors.pink[300],
                  alignment: Alignment.center,
                  child: Text(
                    '縦:80%\n横:50%',
                    style: TextStyle(fontSize: 30, color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

カスタマイズ方法

続いてFractionallySizedBoxのカスタマイズ方法について解説します。

子ウィジェットの位置

FractionallySizedBoxの子ウィジェットの位置をalignmentプロパティで設定できます。

alignmentプロパティの引数にAlignmentウィジェットの列挙型(enum)を渡すことで次のような様々な配置を指定できます。

左上	Alignment.topLeft	Alignment(-1.0, -1.0)
中央上	Alignment.topCenter	Alignment(0.0, -1.0)
右上	Alignment.topRight	Alignment(1.0, -1.0)
中央左	Alignment.centerLeft	Alignment(-1.0, 0.0)
中央	Alignment.center	Alignment(0.0, 0.0)
中央右	Alignment.centerRight	Alignment(1.0, 0.0)
左下	Alignment.bottomLeft	Alignment(-1.0, 1.0)
中央下	Alignment.bottomCenter	Alignment(0.0, 1.0)
右下	Alignment.bottomRight	Alignment(1.0, 1.0)

FractionallySizedBox(
  alignment: Alignment.bottomRight,
  widthFactor: 0.5,
  heightFactor: 0.8,
  child: MyWidget(),
),

まとめ

今回はFractionallySizedBoxの基本的な使い方とカスタマイズ方法について解説しました。

FractionallySizedBoxを使用することで親ウィジェットのサイズを100%として子ウィジェットを相対的な割合でサイズ調整できるのでぜひ使ってみてください。

参考サイト