Flutterは、スマートフォンやタブレットなどのデバイスに合わせてアプリのレイアウトを調整するために、多くの便利な機能を提供しています。その中でも、MediaQueryはデバイスのサイズに関する情報を提供するクラスです。この記事では、FlutterのMediaQueryについて、使い方や実際のコード例を交えながら説明していきます。
Flutterでレスポンシブ対応する方法として、LayoutBuilderウィジットを利用する方法もあります。LayoutBuilderについては別記事にまとめているので、よかったら、そちらも見てみてください。
MediaQueryとは
MediaQueryは、ウィジェットツリーの現在のコンテキストで、デバイスのサイズに関する情報を提供するクラスです。主な情報としては、デバイスの幅、高さ、ピクセル密度（DPI）、向き（縦向きか横向きか）があります。これらの情報は、レスポンシブデザインを実装するために非常に便利です。
MediaQueryの使い方
MediaQueryを使用するには、まず、現在のコンテキストでMediaQueryオブジェクトを作成する必要があります。以下のコードを使用して、現在のコンテキストでMediaQueryオブジェクトを作成することができます。
final mediaQueryData = MediaQuery.of(context);mediaQueryDataには、現在のコンテキストに関するデバイスの情報が含まれています。次に、このオブジェクトから必要な情報を取得することができます。
デバイスの幅と高さを取得する
以下のようにして、デバイスの幅と高さを取得できます。
final width = mediaQueryData.size.width;
final height = mediaQueryData.size.height;ピクセル密度を取得する
以下のようにして、デバイスのピクセル密度を取得できます。
final devicePixelRatio = mediaQueryData.devicePixelRatio;向きを取得する
以下のようにして、デバイスの向きを取得できます。
final orientation = mediaQueryData.orientation;orientationは、Orientation.portraitまたはOrientation.landscapeのいずれかで、それぞれ縦向きと横向きを表します。
MediaQueryを使用した実際の例
MediaQueryを使用して、ウィジェットをレスポンシブに配置する方法を以下に示します。この例では、画面の幅に応じて、ウィジェットの配置を変更します。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomepage(),
);
}
}
class MyHomepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ResponsiveWidget();
}
}
class ResponsiveWidget extends StatelessWidget {
const ResponsiveWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final mediaQueryData = MediaQuery.of(context);
final width = mediaQueryData.size.width;
final isLargeScreen = width >= 600;
return Scaffold(
appBar: AppBar(
title: const Text('Responsive Widget Example'),
),
body: GridView.count(
crossAxisCount: isLargeScreen ? 4 : 2,
children: [
Container(
color: Colors.red,
height: 100,
width: 100,
),
Container(
color: Colors.green,
height: 100,
width: 100,
),
Container(
color: Colors.blue,
height: 100,
width: 100,
),
Container(
color: Colors.yellow,
height: 100,
width: 100,
),
],
),
);
}
}この例では、GridView.countウィジェットを使用して、crossAxisCountプロパティを変更することにより、列の数を制御しています。isLargeScreen変数は、デバイスの幅が600px以上かどうかを判断するために使用されています。
まとめ
FlutterのMediaQueryは、デバイスのサイズに関する情報を提供する非常に便利なクラスです。これを使用することで、ウィジェットをレスポンシブに配置することができます。MediaQueryを使用する方法を学び、実際の例を見て、自分のアプリケーションで使用することができるようになりましょう。