如何在构建MaterialApp前依据屏幕尺寸构建组件且不重建Flutter应用？

Flutter目前尚未原生支持多屏幕，我需要实现一套基于屏幕尺寸构建应用的方案。需求是在构建MaterialApp之前，根据屏幕尺寸渲染不同的Widget，同时要避免触发不必要的应用重建。

以下是当前的代码实现：

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final bool isDualScreen =
        MediaQuery.sizeOf(context).height > MediaQuery.sizeOf(context).width;

    if (isDualScreen) {
      return const DualScreen();
    }

    return const MainAppWidget();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Material(
            color: Colors.transparent,
            child: SizedBox(
                height: MediaQuery.of(context).size.height / 2,
                child: Container()),
          ),
          const Expanded(
            child: MainAppWidget(),
          ),
        ],
      ),
    );
  }
}

Flutter环境信息 #

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.0, on Ubuntu 23.10 6.5.0-13-generic, locale
    en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2022.3)
[✓] IntelliJ IDEA Community Edition (version 2023.2)
[✓] VS Code (version unknown)
    ✗ Unable to determine VS Code version.
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

演示效果 #

要在MaterialApp构建前获取屏幕尺寸且避免不必要的重建，可以通过以下两种方式实现：

1. 启动前提前获取屏幕尺寸 #

在runApp之前初始化Flutter绑定并直接获取屏幕参数，这样可以在根Widget构建前就拿到尺寸信息，完全避免依赖BuildContext导致的重建：

import 'package:flutter/material.dart';

void main() {
  // 初始化Flutter绑定
  WidgetsFlutterBinding.ensureInitialized();
  // 获取屏幕逻辑尺寸（物理尺寸/设备像素比）
  final window = WidgetsBinding.instance.window;
  final screenSize = window.physicalSize / window.devicePixelRatio;
  final bool isDualScreen = screenSize.height > screenSize.width;

  runApp(MyApp(isDualScreen: isDualScreen));
}

class MyApp extends StatelessWidget {
  final bool isDualScreen;

  const MyApp({super.key, required this.isDualScreen});

  @override
  Widget build(BuildContext context) {
    return isDualScreen ? const DualScreen() : const MainAppWidget();
  }
}

// 其余Widget代码保持不变...

这种方式仅在应用启动时获取一次尺寸，适合不需要响应屏幕旋转的固定布局场景。

2. 响应式尺寸判断（支持屏幕旋转） #

如果需要适配屏幕旋转或动态尺寸变化，同时避免全量重建，可以将尺寸判断逻辑放在StatefulWidget中，仅在尺寸真正变化时更新状态：

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDualScreen = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final size = MediaQuery.sizeOf(context);
    // 仅当尺寸判断结果变化时更新状态，避免无意义重建
    final newIsDualScreen = size.height > size.width;
    if (_isDualScreen != newIsDualScreen) {
      setState(() {
        _isDualScreen = newIsDualScreen;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return _isDualScreen ? const DualScreen() : const MainAppWidget();
  }
}

// 其余Widget代码保持不变...

注意：不要直接在build方法中执行尺寸判断并返回不同根Widget，这会导致每次布局刷新都可能触发全应用树重建。通过didChangeDependencies监听尺寸变化，能有效缩小重建范围。

额外优化建议 #

• 避免在DualScreen中重复创建MainAppWidget，可以将MaterialApp作为根节点，内部根据尺寸切换子布局，这样能共享主题、路由等配置，减少代码冗余。
• 若针对折叠屏设备，可关注Flutter官方折叠屏适配进展，或借助平台特定API辅助判断设备形态。

内容的提问来源于stack exchange，提问作者Blazhenka Parmakova