Flutter Web部署至Netlify后自定义卡片组件无法渲染求助

我开发了个人作品集Flutter应用，使用命令flutter build web --web-renderer canvaskit基于CanvasKit渲染器构建Web版本。项目在本地调试模式下运行完全正常，但部署至Netlify后，自定义HoverContainer组件内的Card无法正常渲染。尝试切换为HTML渲染器时，不仅卡片无法渲染，线性渐变文本也无法显示。

自定义HoverContainer组件代码 #

import 'package:flutter/material.dart';
import 'package:awesome_icons/awesome_icons.dart';
import 'package:url_launcher/url_launcher_string.dart';

class HoverContainer extends StatefulWidget {
  final double width;
  final double height;
  final String imagePath;
  final String gitLink;
  final String link;
  final String title;

  const HoverContainer({
    required this.width,
    required this.height,
    required this.imagePath,
    required this.gitLink,
    required this.link,
    required this.title,
    super.key,
  });

  @override
  // ignore: library_private_types_in_public_api
  _HoverContainerState createState() => _HoverContainerState();
}

class _HoverContainerState extends State<HoverContainer> {
  bool _isHovering = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isHovering = true;
        });
      },
      onDoubleTap: () {
        setState(() {
          _isHovering = false;
        });
      },
      child: MouseRegion(
        onEnter: (event) {
          setState(() {
            _isHovering = true;
          });
        },
        onExit: (event) {
          setState(() {
            _isHovering = false;
          });
        },
        child: AnimatedContainer(
          padding: const EdgeInsets.all(20),
          duration: const Duration(milliseconds: 200),
          width: _isHovering ? widget.width * 1.1 : widget.width,
          height: _isHovering ? widget.height * 1.1 : widget.height,
          child: Card(
            color: Colors.black,
            elevation: 50,
            shadowColor: const Color.fromARGB(255, 173, 19, 201),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25.0)),
            child: Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Visibility(
                    visible: _isHovering ? true : false,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Row(
                          children: [
                            Text(
                              widget.title,
                              style:  TextStyle(color: Colors.pink[400]),
                            )
                          ],
                        ),
                        Row(
                          children: [
                            IconButton(
                              onPressed: () {
                                launchUrlString(widget.gitLink);
                              },
                              icon: const Icon(
                                FontAwesomeIcons.github,
                                color: Colors.white,
                              ),
                            ),
                            IconButton(
                              onPressed: () {
                                launchUrlString(widget.link);
                              },
                              icon: const Icon(
                                FontAwesomeIcons.link,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Image.asset(widget.imagePath),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

首页组件调用代码 #

ResponsiveRowColumn(
                  rowMainAxisAlignment: MainAxisAlignment.center,
                  rowPadding: const EdgeInsets.all(30),
                  columnPadding: const EdgeInsets.all(30),
                  layout: ResponsiveWrapper.of(context).isSmallerThan(DESKTOP)
                      ? ResponsiveRowColumnType.COLUMN
                      : ResponsiveRowColumnType.ROW,
                  children: const [
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/E-commerce.png',
                        gitLink: 'https://github.com/Utkarsh4517/Flutter_E-commerce',
                        link: '',
                        title: 'Full Stack E-commerce app (development)',
                      ),
                    ),
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/portfolio.png',
                        gitLink: 'https://github.com/Utkarsh4517/Portfolio',
                        link: '',
                        title: 'Personal Portfolio',
                      ),
                    ),
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/weatherastic.png',
                        gitLink: 'https://github.com/Utkarsh4517/Weatherastic',
                        link: 'https://guileless-cassata-ad27ca.netlify.app/',
                        title: 'Weather App',
                      ),
                    ),
                  ],
                ),
                ResponsiveRowColumn(
                  rowMainAxisAlignment: MainAxisAlignment.center,
                  rowPadding: const EdgeInsets.all(30),
                  columnPadding: const EdgeInsets.all(30),
                  layout: ResponsiveWrapper.of(context).isSmallerThan(DESKTOP)
                      ? ResponsiveRowColumnType.COLUMN
                      : ResponsiveRowColumnType.ROW,
                  children: const [
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/unity.jpeg',
                        gitLink: '',
                        link: '',
                        title: 'Fun Arcade Game made with Unity (alpha)',
                      ),
                    ),
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/comingsoon.png',
                        gitLink: '',
                        link: '',
                        title: 'Coming Soon!',
                      ),
                    ),
                    ResponsiveRowColumnItem(
                      rowFlex: 1,
                      child: HoverContainer(
                        width: 410,
                        height: 280,
                        imagePath: 'assets/imag/comingsoon.png',
                        gitLink: '',
                        link: '',
                        title: 'Coming Soon!',
                      ),
                    ),
                  ],
                ),

解决方案建议 #

1. 移除Card内的Expanded组件
   Expanded仅能在Row、Column、Flex等弹性布局父组件中使用，直接作为Card的子组件会触发布局约束冲突，这是导致渲染异常的核心原因。修改Card的子组件结构：

child: Column( // 替换原Expanded包裹的Column
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // 原有子组件内容
  ],
),

2. 清理缓存并重新构建部署
   执行flutter clean && flutter build web --web-renderer canvaskit清理本地缓存后重新构建，确保Netlify部署时使用最新的构建产物，同时确认Netlify的发布目录设置为build/web。

3. 修复空链接的异常调用
   当gitLink或link为空字符串时，launchUrlString会抛出异常导致组件状态异常，在IconButton的点击事件中添加空值判断：

onPressed: widget.gitLink.isNotEmpty 
  ? () => launchUrlString(widget.gitLink)
  : null,

4. 简化Hover状态逻辑
   移除GestureDetector的Tap/DoubleTap状态切换逻辑，仅保留MouseRegion处理hover状态，避免多源状态修改导致的冲突。

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