如何使 flutter web 应用程序具有一定的大小，并保持手机尺寸？

Question

我正在构建一个跨平台应用程序。我们也将在网络上。但对于网络，我们希望像下图一样，这样整个应用程序基本上仍然具有手机尺寸。我尝试用容器包装 MaterialApp 并设置高度（如果 kIsWeb 为 true），但它留下了一个奇怪的盒子阴影，每次我导航页面时它看起来都很奇怪。

有什么最好的方法来做到这一点的想法吗？

Answer 1

虽然你的问题有点老了，但答案可能对未来的其他人有用。

首选解决方案是为根小部件全局设置宽度大小限制，而不是为每个页面/屏幕小部件一一设置。

为此，我们基本上需要用一个SizedBox小部件包装我们的应用程序小部件，并在其上设置首选width。

为了避免页面小部件过渡到溢出，小部件应该用ClipRect小部件包裹。

最后，自定义小部件树应该用Center小部件包装来定位我们的应用程序小部件。

void main() {
  final runnableApp = _buildRunnableApp(
    isWeb: kIsWeb,
    webAppWidth: 480.0,
    app: const _MyApp(),
  );

  runApp(runnableApp);
}

Widget _buildRunnableApp({
  required bool isWeb,
  required double webAppWidth,
  required Widget app,
}) {
  if (!isWeb) {
    return app;
  }

  return Center(
    child: ClipRect(
      child: SizedBox(
        width: webAppWidth,
        child: app,
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}