Flutter：如何实现Container中心区域可控留空（非全色填充）

你可以通过两种简单方式实现需求，核心是灵活控制中心留空的大小：

方式一：嵌套Container + Margin控制 #

这种方式直观易懂，通过外层红色背景的Container嵌套内层透明Container，用margin控制四周红色区域的宽度：

import 'package:flutter/material.dart';

class A2 extends StatefulWidget {
  const A2({Key? key}) : super(key: key);
  @override
  State<A2> createState() => _A2State();
}

class _A2State extends State<A2> {
  // 直接修改这个值就能调整中心留空的大小
  final double emptySpaceSize = 20.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
        child: Container(
          // margin值决定了四周红色区域的宽度，中心留空尺寸=屏幕尺寸-2*emptySpaceSize
          margin: EdgeInsets.all(emptySpaceSize),
          color: Colors.transparent,
        ),
      ),
    );
  }
}

方式二：BoxDecoration边框实现 #

用Container的decoration属性直接设置边框，代码更简洁：

import 'package:flutter/material.dart';

class A2 extends StatefulWidget {
  const A2({Key? key}) : super(key: key);
  @override
  State<A2> createState() => _A2State();
}

class _A2State extends State<A2> {
  // 修改这个值调整红色边框宽度，间接控制中心留空大小
  final double borderWidth = 20.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red, width: borderWidth),
          // 匹配页面背景色，确保中心区域和页面底色一致
          color: Theme.of(context).scaffoldBackgroundColor,
        ),
      ),
    );
  }
}

两种方式都能实现你要的效果，按需选择即可。

内容的提问来源于stack exchange，提问作者Mohammed Hamdan