LoginSignup
22

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-05-04

はじめに

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

Widgetの大きさを固定すると

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

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

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

スクリーンショット 2021-05-04 9.57.20.jpg

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

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

さてここから本題です。

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

スクリーンショット 2021-05-04 10.04.05.jpg

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

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%

となります!!!

スクリーンショット 2021-05-04 12.11.44.jpg

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

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

追記(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;
  }
}

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22