화면 크기: MediaQuery

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 16번째.

휴대전화는 너비가 다양합니다. 화면 크기를 기준으로 요소의 크기를 정하려면 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)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}