Kích thước màn hình: MediaQuery

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 16 trên 30.

Điện thoại có nhiều kích thước chiều rộng khác nhau. Để đặt kích thước cho một thứ dựa trên màn hình, hãy hỏi Flutter xem màn hình rộng bao nhiêu:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 trên điện thoại này
final height = size.height; // 844

MediaQuery.of(context) đọc thông tin về màn hình mà ứng dụng đang chạy. .size là chiều rộng và chiều cao của màn hình, tính bằng cùng đơn vị pixel như mọi kích thước khác mà bạn viết.

context là đối số mà build nhận. Ứng dụng này đặt trang trong widget riêng của nó, HomeScreen, và đọc kích thước ở đầu build, ngay cạnh trang sử dụng kích thước đó.

Khi có chiều rộng trong một biến, bạn có thể tính toán kích thước: size.width / 2 là một nửa màn hình trên mọi điện thoại, cũng như trên máy tính bảng.

Thử thách

Dễ

Biểu ngữ luôn rộng 200 pixel. Hãy đặt chiều rộng của nó bằng một nửa màn hình, bất kể màn hình rộng bao nhiêu.

Tự làm thử

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)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}