Flutter容器右侧出现空白：图片高度低于500时的布局异常

问题描述 #

在Flutter项目中向页面添加图片，当将图片高度设置为500以下时，容器右侧出现一块颜色不同的空白区域。

原代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.deepPurple,
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.deepPurple, Colors.purple],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                Image.asset(
                  'assets/images/quiz-logo.png',
                  height: 400,
                  fit: BoxFit.fill,
                ),
                const Text(
                  "Learn Flutter the fun way!",
                  style: TextStyle(fontSize: 30, color: Colors.white),
                ),
              ]),
        ),
      ),
    ),
  );
}

异常截图 #

解决方法 #

原因分析 #

问题根源在于：

1. Column 默认会根据子组件的宽度确定自身宽度，当图片高度缩小后，图片宽度未占满屏幕，导致Column宽度不足
2. 外层Container没有强制占满屏幕宽度，渐变背景只覆盖了Column的宽度范围，右侧露出了Scaffold的背景色

修复方案（二选一即可） #

方案1：强制Container占满屏幕宽度

给外层Container添加width: double.infinity，让它铺满整个屏幕宽度：

Container(
  width: double.infinity, // 新增该行
  decoration: const BoxDecoration(
    gradient: LinearGradient(
        colors: [Colors.deepPurple, Colors.purple],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight),
  ),
  // 其余代码保持不变
)

方案2：让Column子组件拉伸占满宽度

给Column添加crossAxisAlignment: CrossAxisAlignment.stretch，同时调整图片的fit属性避免变形：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.stretch, // 新增该行
  children: [
    Image.asset(
      'assets/images/quiz-logo.png',
      height: 400,
      fit: BoxFit.fitHeight, // 修改为fitHeight避免图片拉伸变形
    ),
    // 其余代码保持不变
  ],
)

来源说明 #

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