將 Flutter 的 MaterialApp 放入容器中

Question

如果將 Flutter 的 MaterialApp 視為 Web 應用程序，我想在具有最大寬度和高度的居中容器中顯示它。 直覺上，我認為它應該與以下內容一起使用，但這沒有任何效果：

Container(
  constraints: BoxConstraints(maxHeight: 500, maxWidth: 500),
  child: MaterialApp( ... )
);

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(Launcher());

class Launcher extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GenericScreen(), // or any screen using routes param
      builder: (context, child) => child!,
    );
  }
}

class GenericScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: .8,
      child: Scaffold(appBar: AppBar()),
    );
  }
}

Answer 2

有一個酒吧叫 Flutter Web Frame：

在大型設備（如 Web 或桌面）上設置框架的最大寬度/大小。

這非常適合用於限制內容的大小，如果您的應用程序在多個設備/平台上運行時還沒有響應版本。

https://pub.dev/packages/flutter_web_frame