画面の横幅と高さを取得するにはMediaQuery
を使用します。
配置しているWidgetや画像の大きさを固定値ではなく、画面幅に対する比率で設定したときなどに便利です。
以下は、横幅と高さを文字列として表示するサンプルです。
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を作成し、そこで画面の幅と高さを表示しています。
以下のコードを見てください。
@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」を押すと実行できます。