2023年3月15日 18:58:13go评论48阅读模式

英文:

Cards not rendering when flutter web is deployed to a server (netlify)

问题

I made a flutter app as my portfolio and Built it for web using canvaskit renderer using flutter build web --web-renderer canvaskit

The project runs perfectly fine when running on localhost debug mode.

I have made a custom widget HoverConatiner which contains card inside a container

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
  _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),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This widget is called inside homepage as

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!',
      ),
    ),
  ],
)

This is deployed on link

Below is the expected output when running on localhost ....

If in case you are wondering why I am not using html renderer, because when I tried html renderer the Linier gradient text was also not showing along with the cards.

Github Link of Flutter project - Click
Github Link of Build/web with canvaskit - Click

Thanks in advance!

I tried with both canvaskit and html renderer but both failed to render the cards as expected, I have already attached image of expected output.

英文:

I made a flutter app as my portfolio and Built it for web using canvaskit renderer using
flutter build web --web-renderer canvaskit

The project runs perfectly fine when running on localhost debug mode.

I have made a custom widget HoverConatiner which contains card inside a container

import &#39;package:flutter/material.dart&#39;;
import &#39;package:awesome_icons/awesome_icons.dart&#39;;
import &#39;package:url_launcher/url_launcher_string.dart&#39;;
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() =&gt; _HoverContainerState();
}
class _HoverContainerState extends State&lt;HoverContainer&gt; {
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),
],
),
),
),
),
),
);
}
}

This widget is called inside homepage as

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: &#39;assets/imag/E-commerce.png&#39;,
gitLink: &#39;https://github.com/Utkarsh4517/Flutter_E-commerce&#39;,
link: &#39;&#39;,
title: &#39;Full Stack E-commerce app (development)&#39;,
),
),
ResponsiveRowColumnItem(
rowFlex: 1,
child: HoverContainer(
width: 410,
height: 280,
imagePath: &#39;assets/imag/portfolio.png&#39;,
gitLink: &#39;https://github.com/Utkarsh4517/Portfolio&#39;,
link: &#39;&#39;,
title: &#39;Personal Portfolio&#39;,
),
),
ResponsiveRowColumnItem(
rowFlex: 1,
child: HoverContainer(
width: 410,
height: 280,
imagePath: &#39;assets/imag/weatherastic.png&#39;,
gitLink: &#39;https://github.com/Utkarsh4517/Weatherastic&#39;,
link: &#39;https://guileless-cassata-ad27ca.netlify.app/&#39;,
title: &#39;Weather App&#39;,
),
),
],
),
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: &#39;assets/imag/unity.jpeg&#39;,
gitLink: &#39;&#39;,
link: &#39;&#39;,
title: &#39;Fun Arcade Game made with Unity (alpha)&#39;,
),
),
ResponsiveRowColumnItem(
rowFlex: 1,
child: HoverContainer(
width: 410,
height: 280,
imagePath: &#39;assets/imag/comingsoon.png&#39;,
gitLink: &#39;&#39;,
link: &#39;&#39;,
title: &#39;Coming Soon!&#39;,
),
),
ResponsiveRowColumnItem(
rowFlex: 1,
child: HoverContainer(
width: 410,
height: 280,
imagePath: &#39;assets/imag/comingsoon.png&#39;,
gitLink: &#39;&#39;,
link: &#39;&#39;,
title: &#39;Coming Soon!&#39;,
),
),
],
),

This is deployed on link

Below is the expected output when running on localhost ....

If in case you are wondering why I am not using html renderer, because when I tried html renderer the Linier gradient text was also not showing along with the cards.

Github Link of Flutter project - Click
Github Link of Build/web with canvaskit - Click

Thanks in advance!

I tried with both canvaskit and html renderer but both failed to render the cards as expected, I have already attached image of expected output.

答案1

得分: 1

我移除了Expanded小部件，一切都正常工作

英文:

I removed the Expanded widget and everything worked fine

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Flutter web部署到服务器（netlify）时，卡片未渲染。

问题

答案1

“Flutter Colored Radio Button” 可以直接保留不翻译。

我应该在Ubuntu上保留哪个Android ADB？

多点触控检测在Flutter Flame中

为什么在Dart中覆盖某些字段时需要将类标记为不可变？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论