将 Flutter 的 MaterialApp 放入容器中

Question

I want to display Flutter's MaterialApp in a centered container with a maximum width and height if it is viewed as a web app. Intuitively, I thought it should work with something like the following, but that doesn't have any effect:

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

There is a pub called Flutter Web Frame:

Make the frame max width / size when on large devices such as Web or Desktop.

This is very suitable to be used to limit the size of content, if your application is not yet available a responsive version if it is run on multiple devices / platforms.

https://pub.dev/packages/flutter_web_frame