画面サイズ：MediaQuery

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 16/30。

スマートフォンの画面幅はさまざまです。画面に合わせてサイズを決めるには、Flutterに画面の大きさを尋ねます。

final size = MediaQuery.of(context).size;
final width = size.width;   // このスマートフォンでは390
final height = size.height; // 844

MediaQuery.of(context)は、アプリが実行されている画面の情報を読み取ります。.sizeは画面の幅と高さで、ほかのサイズと同じピクセル単位です。

contextは、buildが受け取るものです。このアプリはページを独自のウィジェットHomeScreenに置き、そのページで使うサイズをbuildの冒頭で読み取ります。

幅を変数に入れておけば、サイズを計算で求められます。size.width / 2は、どのスマートフォンでもタブレットでも画面の半分です。

チャレンジ

簡単

バナーの幅は常に200ピクセルです。画面の幅がどのようなものであっても、画面幅の半分にしてください。

自分で試してみよう

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Size')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('This screen is ${size.width.toStringAsFixed(0)} pixels wide'),
            const SizedBox(height: 16),
            Container(
              width: 200,
              height: 80,
              color: Colors.deepOrange,
              child: const Center(
                child: Text('Banner', style: TextStyle(color: Colors.white)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}