スマホには、様々なサイズがあります。

どのデバイスで画面を表示しても画面をはみ出したり、文字が改行したりせず、コンテンツが最適な位置にするようにしなければなりません。

その場合、デバイスの画面のサイズを取得することができれば、画面のサイズに合わせてコンテンツを作成することができます。

まずは、double 型で、deviceWidthdeviceHeightを作成します。

private 変数として『_』をつけておきます。

class _HomeState extends State<Home> {
  double? _deviceWidth, _deviceHeight;

デバイスの画面サイズを取得するには、MediaQueryを使用します。

deviceWidthdeviceHeightにそれぞれwidthheightを指定しましょう。

@override
  Widget build(BuildContext context) {
    _deviceWidth = MediaQuery.of(context).size.width;
    _deviceHeight = MediaQuery.of(context).size.height;

print で確認してみましょう。

@override
  Widget build(BuildContext context) {
    _deviceWidth = MediaQuery.of(context).size.width;
    _deviceHeight = MediaQuery.of(context).size.height;
    print('width: $_deviceWidth');
    print('height: $_deviceHeight');

image2

iPhone13 のエミュレータを使用しているので、幅が 390.0、高さが 844.0 と表示されました。

ブログ一覧