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

Android iOS Dart アプリ開発 Flutter

はじめに

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

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,
  ),
 );
 }