[基盤]画面の横幅と高さを取得する

動作環境: Flutter 2.8.1 Dart 2.15.1
LINEでこのページを共有するTwitterでこのページを共有するこのページをはてなブックマークに追加

画面の横幅と高さを取得するにはMediaQueryを使用します。
配置しているWidgetや画像の大きさを固定値ではなく、画面幅に対する比率で設定したときなどに便利です。

以下は、横幅と高さを文字列として表示するサンプルです。

lib/main.dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('サンプル'),
),
body: const ScreenInfo(),
),
);
}
}
class ScreenInfo extends StatelessWidget {
const ScreenInfo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
return Center(
child: Container(
color: Colors.teal.shade200,
width: _screenSize.width * 0.8,
height: _screenSize.height * 0.4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('画面の幅は${_screenSize.width}です'),
Text('画面の高さは${_screenSize.height}です')
],
),
),
);
}
}

今回は22行目からはじまるScreenInfoというWidgetを作成し、そこで画面の幅と高さを表示しています。
以下のコードを見てください。

lib/main.dart
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
return Center(
child: Container(
color: Colors.teal.shade200,
width: _screenSize.width * 0.8,
height: _screenSize.height * 0.4,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('画面の幅は${_screenSize.width}です'),
Text('画面の高さは${_screenSize.height}です')
],
),
),
);

27行目でMediaQueryにより_screenSizeを取得しています。
あとはそこからを37 - 38行目のように_screenSize.width_screenSize.heightで幅と高さを取得して文字列として表示するようにしています。

また、他にも32 - 33行目のようにContainerの幅と高さを画面のサイズを基準にしてある一定の割合になるように調整しています。
たとえば32行目のように_screenSize.width * 0.8とすると画面幅を100%としたときに常に80%の大きさで表示されるようになります。
この方法は端末の幅が様々なケースで、ある一定の比率で大きさを固定させたいときに便利ですね。

ちなみに最初はScreenInfoとして切り出さずにMyAppの9行目下のところでMediaQuery_screenSizeを取得するコードを書いていたのですが
それだと以下のようなエラーメッセージが出てうまくいきませんでした。

No MediaQuery widget ancestor found.

どうやら、すくなくともルートのWidgetから最低でも1階層は下のWidgetじゃないとMediaQueryは使えないようです。

*「Run」を押すと実行できます。