Flutter Web发布版CanvasKit渲染下Footer布局异常求助

Debug模式下代码运行时所有元素显示正常，但使用命令flutter build web --release --web-renderer canvaskit发布Web应用后，页面中仅Footer组件出现异常——原本正常的Footer变成一块持续向下延伸的超长灰色区域，其余页面元素均无问题。

相关代码片段 #

WebLayoutFooter组件 #

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

import 'web_row_footer.dart';
class WebLayoutFooter extends StatelessWidget {
  const WebLayoutFooter({
    super.key,
    required this.sh,
    required this.sw,
  });

  final double sh;
  final double sw;

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(builder: (context, sizingInformation) {
      return Column(
        children: [
          Container(
            padding: sizingInformation.isTablet || sizingInformation.isMobile
                ? EdgeInsets.all(
                    sh * 0.05,
                  )
                : EdgeInsets.all(
                    sh * 0.15,
                  ),
            width: sw,
            color: Theme.of(context).primaryColor,
            child: Flexible(
              fit: FlexFit.tight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    flex: 2,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        WebFooterRow(
                          icons: Icons.location_on,
                          text: 'Address:',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          text:
                              'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          icons: Icons.phone_in_talk,
                          text: 'Tel :+9229341037',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          icons: Icons.watch_later_rounded,
                          text: 'Response hours: 8 to 20',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          icons: Icons.mail,
                          text: 'Email: info@onlearn.com',
                        ),
                      ],
                    ),
                  ),
                  const Spacer(),
                  Expanded(
                    flex: 2,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        WebFooterRow(
                          text: 'Categories',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          onTap: () {},
                          text: 'Manage My Account',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          onTap: () {},
                          text: 'Our services',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          onTap: () {},
                          text: 'Available payment methods',
                        ),
                        const SizedBox(height: 10),
                        WebFooterRow(
                          onTap: () {},
                          text: 'more',
                        ),
                        if (sizingInformation.isMobile)
                          Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                             const  SizedBox( height: 40),
                              WebFooterRow(
                                text: 'Links',
                              ),
                              const SizedBox(height: 10),
                              WebFooterRow(
                                text: 'About us',
                              ),
                              const SizedBox(height: 10),
                              WebFooterRow(
                                text: 'blog',
                              ),
                            ],
                          ),
                      ],
                    ),
                  ),
                  if (!sizingInformation.isMobile) const Spacer(),
                  if (!sizingInformation.isMobile)
                    Expanded(
                      flex: 1,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          WebFooterRow(
                            text: 'Links',
                          ),
                          const SizedBox(height: 10),
                          WebFooterRow(
                            text: 'About us',
                          ),
                          const SizedBox(height: 10),
                          WebFooterRow(
                            text: 'blog',
                          ),
                        ],
                      ),
                    ),
                  if (!sizingInformation.isTablet &&
                      !sizingInformation.isMobile)
                    Expanded(
                      flex: 2,
                      child: FittedBox(
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              height: 70,
                              width: 70,
                              color: Colors.white,
                            ),
                            const SizedBox(width: 20),
                            const Text(
                              'kleeli',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 34,
                                  fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                    )
                ],
              ),
            ),
          ),
          Container(
            height: sh * 0.05,
            width: double.infinity,
            color: Theme.of(context).primaryColorDark,
            child: const Center(
                child: Text(
              '© 2001-2023, All Rights Reserved',
              style: TextStyle(color: Colors.white, fontSize: 12),
            )),
          )
        ],
      );
    });
  }
}

WebFooterRow组件 #

import 'package:flutter/material.dart';

class WebFooterRow extends StatelessWidget {
  String text;
  double? width;
  IconData? icons;
  void Function()? onTap;
  WebFooterRow({
    Key? key,
    required this.text,
    this.width,
    this.icons,
    this.onTap,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: SizedBox(
        width: width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            icons != null
                ? Icon(
                    icons,
                    color: Colors.white,
                    size: 20,
                  )
                : const SizedBox(),
            icons != null ? const SizedBox(width: 10) : const SizedBox(),
            Expanded(
              child: Text(
                text,
                maxLines: 3,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter版本信息 #

Flutter 3.13.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ff5b5b5fa6 (4 weeks ago) • 2023-08-24 08:12:28 -0500
Engine • revision b20183e040
Tools • Dart 3.1.0 • DevTools 2.25.0

效果对比 #

• Debug模式正常效果：
• 发布版异常效果：

问题原因与修复方案 #

核心原因 #

异常是由于WebLayoutFooter中最外层的Column未约束垂直高度，且内部嵌套的Flexible(fit: FlexFit.tight)在CanvasKit渲染器的发布模式下，错误地将垂直空间无限拉伸，导致灰色背景容器被过度扩展。

修复步骤 #

1. 移除Container内部的Flexible组件：当前布局不需要让Row弹性填充垂直空间，该组件是导致拉伸的主要诱因
2. 为外层Column添加mainAxisSize: MainAxisSize.min：确保Footer仅占用自身内容所需的高度，不会额外占用空白空间
3. 替换外部传递的sh/sw参数：直接使用MediaQuery.of(context).size获取上下文尺寸，避免外部传递的尺寸值在发布模式下出现偏差

修复后的WebLayoutFooter核心代码：

@override
Widget build(BuildContext context) {
  final screenSize = MediaQuery.of(context).size;
  return ResponsiveBuilder(builder: (context, sizingInformation) {
    return Column(
      mainAxisSize: MainAxisSize.min, // 约束Column仅占用内容高度
      children: [
        Container(
          padding: sizingInformation.isTablet || sizingInformation.isMobile
              ? EdgeInsets.all(screenSize.height * 0.05)
              : EdgeInsets.all(screenSize.height * 0.15),
          width: screenSize.width,
          color: Theme.of(context).primaryColor,
          // 移除Flexible，直接放置Row组件
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 原有子组件保持不变
              ...
            ],
          ),
        ),
        Container(
          height: screenSize.height * 0.05,
          width: double.infinity,
          color: Theme.of(context).primaryColorDark,
          child: const Center(
              child: Text(
            '© 2001-2023, All Rights Reserved',
            style: TextStyle(color: Colors.white, fontSize: 12),
          )),
        )
      ],
    );
  });
}

额外优化建议 #

• 替换WebFooterRow中的空SizedBox()为SizedBox.shrink()，代码更规范
• 避免依赖外部传递的尺寸参数，优先使用MediaQuery或LayoutBuilder获取上下文尺寸，提升布局稳定性

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