Flutter中Material内Container占满全屏如何自适应子内容高度

出现Container默认占满全屏高度的核心原因是Flutter约束传递机制下的几个组件默认行为：

• Column组件默认mainAxisSize属性为MainAxisSize.max，会在垂直方向尽可能占据父组件传递的最大可用高度，不会自动按子组件总高度收缩
• 当前用Center包裹内容列，会把根组件（全屏透明的Material）的全屏约束直接传递给子组件，触发容器撑满逻辑
• 嵌套的Stack组件默认也会匹配父组件的最大可用尺寸，不会自动包裹子内容高度

按以下几点修改代码即可实现高度自适应内容的卡片效果：

• 给内容Column添加mainAxisSize: MainAxisSize.min属性，强制列在垂直方向只包裹子组件所需的最小高度
• 移除包裹Column的Center组件，改为给外层Stack设置alignment: Alignment.center实现内容居中，避免Center组件传递撑满全屏的约束
• 给外层卡片Container添加水平方向外边距，避免卡片横向贴满屏幕边缘，符合卡片式设计的预期
• （适配新版Flutter可选）将废弃的FlatButton替换为TextButton，避免API报错

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_overlay_window/flutter_overlay_window.dart';

class TrueCallerOverlay extends StatefulWidget {
  const TrueCallerOverlay({Key? key}) : super(key: key);

  @override
  State<TrueCallerOverlay> createState() => _TrueCallerOverlayState();
}

class _TrueCallerOverlayState extends State<TrueCallerOverlay> {
  bool isGold = true;

  final _goldColors = const [
    Color.fromARGB(255, 51, 219, 79),
    Color.fromARGB(255, 151, 235, 169),
    Color.fromARGB(255, 15, 107, 35),
  ];

  final _silverColors = const [
    Color(0xFFAEB2B8),
    Color(0xFFC7C9CB),
    Color(0xFFD7D7D8),
    Color(0xFF003226),
  ];
  final bgColor = Color(0xFF003226);
  final textColor = Colors.white;

  @override
  void initState() {
    super.initState();
    FlutterOverlayWindow.overlayListener.listen((event) {
      log("$event");
      setState(() {
        isGold = !isGold;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: Center(
        child: Container(
          // 新增水平边距，避免卡片贴满屏幕左右
          margin: const EdgeInsets.symmetric(horizontal: 16.0),
          padding: const EdgeInsets.symmetric(vertical: 12.0),
          width: double.infinity,
          decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.circular(12.0),
          ),
          child: GestureDetector(
            onTap: () {
              FlutterOverlayWindow.shareData(
                  "Heyy this is a data from the overlay");
            },
            // 给Stack设置对齐属性，替换内部的Center组件
            child: Stack(
              alignment: Alignment.center,
              children: [
                // 移除包裹Column的Center，给Column设置mainAxisSize.min
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      child: Text(
                        "Attention",
                        textAlign: TextAlign.left,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 28,
                            color: textColor),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      child: Text(
                        "t1",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.normal,
                            fontSize: 20,
                            color: textColor),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 10),
                      child: Text(
                        "t2",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.normal,
                            fontSize: 20,
                            color: textColor),
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerRight,
                      margin: EdgeInsets.all(25),
                      // 替换废弃的FlatButton为TextButton
                      child: TextButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.white),
                          padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 16, vertical: 8)),
                        ),
                        child: Text(
                          'Reference',
                          style: TextStyle(fontSize: 20.0, color: Colors.black),
                        ),
                        onPressed: () {},
                      ),
                    ),
                  ],
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  child: IconButton(
                    onPressed: () async {
                      await FlutterOverlayWindow.closeOverlay();
                    },
                    icon: const Icon(
                      Icons.close,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如果修改后仍有高度异常，检查调用FlutterOverlayWindow.showOverlay()时的高度参数，不要将height设置为WindowSize.matchParent，可以设置为WindowSize.wrapContent，从窗口层面适配内容高度，体验更好。

内容的提问来源于stack exchange，提问作者Mst. Murshida Khnom