如何获取屏幕宽高并实现Flutter应用多设备适配？

Hey there! I’ve been in your shoes before—building an app on one device only to find it breaks on others can be super frustrating. Let’s fix this screen adaptation issue together.

核心问题分析 #

You mentioned setting fixed width/height on a container wrapping a ListView, based on the Pixel 2XL’s screen. Fixed dimensions are the culprit here—they don’t scale with different screen sizes, leading to overflow errors on smaller devices or wasted space on larger ones. Here are the most effective fixes:

1. 用MediaQuery动态获取屏幕尺寸

Instead of hardcoding values like width: 411.0 or height: 823.0, use MediaQuery to grab the current device’s screen dimensions in real-time. This ensures your container always fits the screen perfectly.

Example code:

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: ListView(
    children: [
      // Your list items here
    ],
  ),
)

Pro tip: If you don’t need the container to take up the entire screen, use fractions (e.g., MediaQuery.of(context).size.height * 0.8 for 80% of the screen height) to keep things flexible.

2. 用Expanded/Flexible让容器自适应可用空间

If your container sits inside a Column or Row, wrap it with Expanded to make it take up all remaining space in the flex layout. This works especially well if you have other widgets (like an app bar or footer) on the screen.

Example code:

Scaffold(
  appBar: AppBar(title: Text("My App")),
  body: Column(
    children: [
      // A top widget (e.g., a header)
      Text("Welcome!"),
      // Let the container take remaining space
      Expanded(
        child: Container(
          child: ListView(
            children: [
              // Your list items here
            ],
          ),
        ),
      ),
    ],
  ),
)

Flexible is similar but lets the widget shrink if needed—use it if you want the container to only take as much space as its content requires, while still adapting to the screen.

3. 直接移除容器，让ListView占据屏幕

Wait a second—do you even need that container? ListView is a scrollable widget that can directly replace your container. If you’re not adding padding, decoration, or other container-specific features, simplify your code:

Example code:

Scaffold(
  body: ListView(
    children: [
      // Your list items here
    ],
  ),
)

This automatically makes the ListView fit the screen and handle scrolling correctly across all devices.

4. 用LayoutBuilder获取父组件约束

For advanced cases where you need to adapt based on the parent widget’s size (not just the entire screen), use LayoutBuilder. It gives you access to the constraints passed down from the parent, so you can adjust your container’s size dynamically.

Example code:

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      child: ListView(
        children: [
          // Your list items here
        ],
      ),
    );
  },
)

额外建议 #

• Avoid fixed dimensions wherever possible in Flutter—stick to relative sizing instead.
• Test your app on multiple emulators/simulators (or real devices) to catch adaptation issues early.
• If you need to handle different screen densities, check out MediaQuery.of(context).devicePixelRatio, but it’s rarely needed for basic screen fitting.

Give these approaches a try—they should eliminate the overflow errors and make your app work seamlessly across all devices!

内容的提问来源于stack exchange，提问作者Tom O'Sullivan