Flutter 端末サイズによってWidgetの大きさを比率で指定する方法

はじめに

上記を参考にしました。間違ってたらごめんなさい。。

Widgetの大きさを固定すると

FlutterでUIを作る際に、Widgetの大きさを固定値で指定するのはできるだけ避けたいところです。。。

Container(
 height: 40,
 width: 60,
),

もし上記のように指定した場合、iPhone 5sとiPhone Xs Maxでは見た目のサイズ感が違っています。。

なぜなら、Flutterはどの端末でアプリが実行されているかわからないため、Containerは常に40 x 60となります。

さまざまな画面サイズに応じてWidgetの大きさを比率で指定する

さてここから本題です。

どの画面サイズでも同じような大きさの比率でWidgetを表示させるために、画面をグリッドのように区切って「ブロック」ができるようにイメージします。

どの画面サイズでも「ブロック３つ分の横幅」みたいなサイズ指定をするイメージかと。

size_config.dartを作る

lib/config/size_config.dart

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

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;

  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
  }
}

SizeConfigを初期化して使う

lib/main.dart

import './config/size_config.dart';

class HomeScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 SizeConfig().init(context);
 return Center(
  child: Container(
   height: SizeConfig.blockSizeVertical * 20,
   width: SizeConfig.blockSizeHorizontal * 50,
   color: Colors.orange,
  ),
 );
 }

これで長方形のサイズは、
width : 画面の幅50%
height : 画面の高さ20%

となります！！！

このSizeConfigはあらゆる場面で汎用的に使えると思うので、Flutter開発者は知っておいて損はないでしょう

説明が間違ってりしたら教えてください！

追記(null safetyに対応したバージョン！)

無理やりではありますが、size_config.dartをnull safetyに対応させてみました！

lib/config/size_config.dart

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

class SizeConfig {
  static MediaQueryData? _mediaQueryData;
  static double? screenWidth;
  static double? screenHeight;
  static double? blockSizeHorizontal;
  static double? blockSizeVertical;

  static double? _safeAreaHorizontal;
  static double? _safeAreaVertical;
  static double? safeBlockHorizontal;
  static double? safeBlockVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData!.size.width;
    screenHeight = _mediaQueryData!.size.height;
    blockSizeHorizontal = screenWidth! / 100;
    blockSizeVertical = screenHeight! / 100;

    _safeAreaHorizontal =
        _mediaQueryData!.padding.left + _mediaQueryData!.padding.right;
    _safeAreaVertical =
        _mediaQueryData!.padding.top + _mediaQueryData!.padding.bottom;
    safeBlockHorizontal = (screenWidth! - _safeAreaHorizontal!) / 100;
    safeBlockVertical = (screenHeight! - _safeAreaVertical!) / 100;
  }
}

👆でいいのかな？？？
あんまりわかっていないので、どなたか助言あればお願いします！！