[Flutter] MediaQuery or FractionallySizedBox レスポンシブ対応について

概要

MediaQuery と FractionallySizedBox はどちらも Flutter においてレイアウトを管理するためのウィジェットですが、それぞれの目的と使用方法は異なります。以下にそれぞれの違いと使用例を残します。

MediaQueryとは

画面のサイズやデバイスの特性に関する情報を取得するためのウィジェットです。レイアウトを調整するために、デバイスの画面サイズ、画面の向き、デバイスのピクセル密度などを取得できます。これにより、異なるデバイスや画面サイズに対してレスポンシブなデザインを実現することが可能です。

使用例

以下は、MediaQuery を使用して画面の幅を取得し、それに基づいてウィジェットのサイズを調整する例です。

import 'package:flutter/material.dart';

class MyResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      width: screenWidth * 0.5, // 画面幅の50%に設定
      height: 200,
      color: Colors.blue,
      child: Center(
        child: Text('Responsive Widget'),
      ),
    );
  }
}

FractionallySizedBoxとは

親のサイズに対する割合で自身のサイズを設定するためのウィジェットです。指定された幅と高さの割合に基づいて、ウィジェットのサイズを調整します。このウィジェットは、親のサイズが変動する場合に、そのサイズに依存してWidgetのサイズを調整したい場合に便利です。

使用例

以下はFractionallySizedBoxを使用して親ウィジェットの幅の50%、高さの25%にサイズを設定する例です。

import 'package:flutter/material.dart';

class MyFractionalWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 300,  // 親ウィジェットの幅
      height: 300, // 親ウィジェットの高さ
      child: FractionallySizedBox(
        widthFactor: 0.5,  // 親の幅の50%
        heightFactor: 0.25, // 親の高さの25%
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text('Fractional Widget'),
          ),
        ),
      ),
    );
  }
}

比較してみた

MediaQueryを使った場合

Container(
  width: MediaQuery.of(context).size.width * 0.5,
  height: MediaQuery.of(context).size.height * 0.5,
  color: Colors.blue,
);

用途：デバイスや画面の情報を取得するために使用。
利点：画面の幅、高さ、ピクセル密度、向きなど、さまざまな情報を提供。
デメリット：サイズ設定のコードが冗長になりがち。

FractionallySizedBoxを使った場合

FractionallySizedBox(
  widthFactor: 0.5,  // 親の幅の50%
  heightFactor: 0.5, // 親の高さの50%
  child: Container(color: Colors.blue),
);

用途：親ウィジェットのサイズに対する相対的なサイズ設定。
利点：コードがシンプルで直感的、動的なレイアウト変更に対応、レスポンシブデザインのサポート、コードの可読性と保守性の向上。
デメリット：親ウィジェットのサイズに依存するため、デバイス全体の情報を取得するのには適していない。

また、FractionallySizedBoxはconstを使用できるため、コンパイル時定数としてインスタンス化できるという利点があります。これにより、パフォーマンスが向上しアプリケーションのメモリ効率が良くなります。

まとめ

FractionallySizedBox は静的なレイアウト構築や、親のサイズに応じた相対的なレイアウト設定において非常に便利であり、特にパフォーマンスとメモリ効率を重視する場合に優れています。一方で、デバイス情報に依存するレイアウトには MediaQuery が必要です。

参考リンク