我怎样才能像 CSS 中的 "max-width" 容器那样在 Flutter 中将内容容器居中？

Question

如何在 Flutter 中制作这样一个居中的内容容器？:

.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 600px;
    background-color: red;
    height: 100vh;
}

<div class="container">
    Hello inside container
</div>

我试过了，但是一旦应用程序小于 maxWidth，它就会溢出而不是适应屏幕宽度。

import "package:flutter/material.dart";

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Theme.of(context).colorScheme.background,
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              color: Colors.red,
              constraints: const BoxConstraints(maxWidth: 800),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    "Hello inside container",
                    style: TextStyle(fontSize: 40),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

Answer 1

您可以使用 MediaQuery.of(context).size.width 作为宽度。它为您提供了整个屏幕宽度。另外Limit max width of Container in Flutter看看这个

Answer 2

试试下面的代码将你的 Column 包裹在 Expanded or Flexible

中

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Container(
          width: double.infinity,
          color: Colors.red,
          constraints: const BoxConstraints(maxWidth: 800),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                "Hello inside container",
                style: TextStyle(fontSize: 40),
              ),
            ],
          ),
        ),
      ),
    ],
  ),

我怎样才能像 CSS 中的 "max-width" 容器那样在 Flutter 中将内容容器居中？

How can I center a content container in Flutter like a "max-width" container in CSS?

html

css

flutter

如何在 Flutter 中制作这样一个居中的内容容器？: