FlutterでMediaQueryクラスを使ってデバイス情報を取得する方法

Flutterでアプリケーションを開発する際、画面サイズや向きなどのデバイス情報を取得するシーンがあります。Flutterでは、MediaQueryクラスを使用することで簡単にこれらの情報を取得できます。

1. MediaQueryクラスとは？

MediaQueryクラスは、アプリケーションの現在のメディア情報（画面サイズ、デバイスの向き、テキストスケールファクターなど）を提供するためのウィジェットです。これを使用することで、デバイスに応じたレスポンシブデザインを実現することができます。

2. MediaQueryクラスの使い方

MediaQueryクラスを使用するためには

MediaQueryで情報を取得

MediaQueryを使用してデバイス情報を取得します。例として、画面の幅、高さ、向きなどを取得する方法を以下に示します。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MediaQueryを使用して画面情報を取得
    Size screenSize = MediaQuery.sizeOf(context);
    Orientation orientation = MediaQuery.orientationOf(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQuery Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Screen Width: $screenSize.width'),
            Text('Screen Height: $screenSize.height'),
            Text('Orientation: $orientation'),
          ],
        ),
      ),
    );
  }
}

3. 具体的な例

以下は、MediaQueryを使って画面の向きに応じて異なるレイアウトを表示する例です。

class ResponsiveLayoutExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MediaQueryを使用して画面の向きを取得
    var orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Layout Example'),
      ),
      body: orientation == Orientation.portrait
          ? Column(
              children: <Widget>[
                Expanded(child: Container(color: Colors.blue)),
                Expanded(child: Container(color: Colors.green)),
              ],
            )
          : Row(
              children: <Widget>[
                Expanded(child: Container(color: Colors.blue)),
                Expanded(child: Container(color: Colors.green)),
              ],
            ),
    );
  }
}

この例では、画面が縦向きの場合は縦に2つのコンテナを表示し、横向きの場合は横に2つのコンテナを表示します。これにより、デバイスの向きに応じたレスポンシブなレイアウトを実現できます。

まとめ

MediaQueryクラスを使用することで、Flutterアプリケーションでのデバイス情報の取得が可能でした。