【Flutter】画面のサイズ（widthとheight）を取得するには？

2023年11月30日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

Flutterで画面のサイズを取得するには、MediaQueryクラスを使用します。

// 画面のサイズを取得
Size screenSize = MediaQuery.sizeOf(context);

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 画面のサイズを取得
    Size screenSize = MediaQuery.sizeOf(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Screen Size Example'),
      ),
      body: Center(
        child: Text(
          '画面の幅: ${screenSize.width}\n画面の高さ: ${screenSize.height}',
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}