我的Flutter Web构建与调试时不一样。

huangapple
go评论54阅读模式
英文:

My flutter web build doesn't work the same as in debug

问题

I made a website in flutter and then I got a build. But the version in web debug and build does not work the same.
我在Flutter中创建了一个网站，然后进行了构建。但是Web调试和构建版本的效果不同。

Only the background gif appears on the page. It also appears transparent.
页面上只显示背景gif图像，而且它是透明的。

I ran the site in xampp and various hosts for testing purposes and I changed the browser but still got the same error.
我在XAMPP和各种主机上运行了网站进行测试，尝试更改浏览器，但仍然遇到相同的错误。

I rebuilt that project. And I used "flutter doctor", "flutter clean" but didn't work.
我重新构建了该项目。我使用了 "flutter doctor" 和 "flutter clean" 但没有解决问题。

It doesn't appear that there is an error in the Web Console.
Web控制台中似乎没有错误。

Web debug result:
Web调试结果：

enter image description here

build result:
构建结果：

enter image description here

When I built this project for android, it worked fine and gave the same result.
当我为Android构建此项目时，它正常工作并产生相同的结果。

I also built the classic code of Flutter for web and it produced the same result without any problems.
我还构建了Flutter的经典Web代码，并且没有遇到任何问题，它产生了相同的结果。

I added appbar to my code and I saw it was added in build without any problem.
我在我的代码中添加了应用栏，并在构建中看到它已添加，没有任何问题。

Then in my code, I removed the stack widget attached to the body property of scaffold and I painted all the containers red. And I saw that the rows instead of the whole page are grayed out. (Note: the background gif was in the stack, I removed it as well.)
然后，在我的代码中，我删除了附加到scaffold的body属性的stack小部件，并将所有容器都涂成红色。我发现行变灰而不是整个页面。（注意：背景gif图像也在stack中，我也将其删除。）

I found another similar question in SO.
我在Stack Overflow上找到了另一个类似的问题。

a link!

I noticed an important thing. I found the problem, but I don't understand why it happened and how to fix it. If the expanded and fittedbox widgets in the stack are removed, the problem disappears.

Page 1 (problematic state):
我注意到一个重要的事情。我找到了问题，但不理解为什么会发生以及如何修复它。如果在stack中移除了扩展和适合框小部件，问题将消失。

页面1（存在问题的状态）：

return Stack(
  children: [
    Positioned.fill(
      child: Container(
        child: Image.asset(
          "ImageAssets/mobile.gif",
          fit: BoxFit.fill,
        ),
      ),
    ),
    Center(
      child: Positioned(
        top: 0,
        left: 0,
        child: Container(
          width: 1200,
          height: 3999,
          child: Row(
            children: [
              Expanded(
                flex: 1,
                child: SingleChildScrollView(
                  controller: _scrollController,
                  child: Container(
                    width: 600,
                    height: 1000,
                    color: Colors.brown.withOpacity(0.2),
                    child: Column(
                      children: [
                        buttonFunc("Home", _scrollController, context),
                        buttonFunc("Home", _scrollController, context),
                        buttonFunc("Home", _scrollController, context),
                        buttonFunc("Home", _scrollController, context),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: 3,
                child: SingleChildScrollView(
                  child: Container(
                    height: 3999,
                    child: Column(
                      children: [
                        TextBox(leftMarginValue: widthSize/4, topMarginValue: heightSize/20, insideText: "Testibulum arcu elit, interdum vel porttitor eu.", context: context),
                        TextBox(leftMarginValue: widthSize/80, topMarginValue: heightSize/20, rightMarginValue: widthSize/4-widthSize/80, insideText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", context: context),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ],
);

Page 2 (problematic state):
页面2（存在问题的状态）：

child: Stack(
  children: [
    Container(
      height: heightSize / 8,
      width: widthSize / 5,
      decoration: BoxDecoration(
        borderRadius: BorderRadiusDirectional.circular(22),
        color: Colors.grey,
        border: Border.all(color: Colors.white, width: 2),
      ),
      child: Center(
        child: Padding(
          padding: EdgeInsetsDirectional.only(
              start: widthSize / 80,
              end: widthSize / 80,
              top: heightSize / 80,
              bottom: heightSize / 80),
          child: Expanded(
            child: FittedBox(
              child: Text(
                softWrap: false,
                overflow: TextOverflow.ellipsis,
                insideText,
                style: TextStyle(fontSize: widthSize / 50, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    ),
  ],
);

If I build the above codes, the screen is completely gray.

Page 2 (expanded and fitted removed from Stack):
如果构建上述代码，屏幕会完全变为灰色。

页面2（从Stack中移除了扩展和适合框）：

return Stack(
  children: [
    Container(
      child: Image.asset(
        "ImageAssets/mobile.gif",
        fit: BoxFit.fill,
      ),
    ),
    Center(
      child: Container(
        width: 1200,
        height: 3999,
        child: Row(
          children: [
            SingleChildScrollView(
              controller: _scrollController,
              child: Container(
                width: 600,
                height: 1000,
                color: Colors.brown.withOpacity(0.2),
                child: Column(
                  children: [
                    buttonFunc("Home", _scrollController, context),
                    buttonFunc("Home", _scrollController, context),
                    buttonFunc("Home", _scrollController, context),
                    buttonFunc("Home

<details>
<summary>英文:</summary>

I made a website in flutter and then I got a build. But the version in web debug and build does not work the same.

Only the background gif appears on the page. It also appears transparent.

I ran the site in xampp and various hosts for testing purposes and I changed browser but still got the same error.

i rebuild that project.And i used &quot;flutter doctor&quot; , &quot;flutter clean&quot; but didnt work.

It doesn&#39;t appear that there is an error in the Web Console.

web debug result :

[enter image description here](https://i.stack.imgur.com/Y2aek.jpg)

\----

build result

[enter image description here](https://i.stack.imgur.com/axRfe.png)

*When I built this project for android, it worked fine and gave the same result.*

*I also built the classic code of fllutter for web and it produced the same result without any problems.*



-----------------edit1------------------------------------




i added appbar to my code and i saw it was added in build without any problem.
[enter image description here][1]


-------------------------edit2----------------------------



then in my code I removed the stack widget attached to the body property of scaffold and I painted all the containers red.And I saw that the rows instead of the whole page are grayed out.(note: the background gif was in the stack, I removed it as well.)

[enter image description here][2]


-------------------------edit3----------------------------



I found another similar question in SO.

[a link](https://stackoverflow.com/questions/68608970/when-i-build-the-web-using-flexiblespacebar-and-check-it-on-the-web-not-the-too)!


-------------------------edit3----------------------------


I noticed a important thing.

I found the problem but I don&#39;t understand why it happened and how to fix it.

If the expanded and fittedbox widgets in the stack are removed, the problem disappears.


page 1(problematic state) :

return Stack(
children: [
Positioned.fill(
child: Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
),
Center(
child: Positioned(
top: 0,
left: 0,
child: Container(
width: 1200,
height: 3999,
child: Row(
children: [
Expanded(
flex: 1,
child: SingleChildScrollView(
controller: _scrollController,
child: Container(
width: 600,
height: 1000,
color: Colors.brown.withOpacity(0.2),
child: Column(
children: [
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
],
),
),
),
),
Expanded(
flex: 3,
child: SingleChildScrollView(
child: Container(
height: 3999,

                    child: Column(
children: [
TextBox(leftMarginValue: widthSize/4,topMarginValue: heightSize/20,insideText: &quot;Testibulum arcu elit, interdum vel porttitor eu.&quot;,context: context),
TextBox(leftMarginValue: widthSize/80,topMarginValue: heightSize/20,rightMarginValue: widthSize/4-widthSize/80,insideText: &quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;,context: context),
],
),
),
),
),
],
),
),
),
),
],
);

page 2 (problematic state):

child: Stack(
children: [
Container(

          height: heightSize / 8,
width: widthSize / 5,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(22),
color: Colors.grey,
border: Border.all(color: Colors.white, width: 2),
),
child: Center(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: widthSize / 80,
end: widthSize / 80,
top: heightSize / 80,
bottom: heightSize / 80),
child: Expanded(
child: FittedBox(
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,
insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),
),
),
),
),
],
),

If I build the above codes, the screen is completely gray.
page 2 (expanded and fitted removed from Stack) :

return Stack(
children: [
Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
Center(
child: Container(
width: 1200,
height: 3999,
child: Row(
children: [
SingleChildScrollView(
controller: _scrollController,
child: Container(
width: 600,
height: 1000,
color: Colors.brown.withOpacity(0.2),
child: Column(
children: [
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
buttonFunc("Home",_scrollController,context),
],
),
),
),
SingleChildScrollView(
child: Container(
height: 3999,

                child: Column(
children: [
TextBox(leftMarginValue: widthSize/4,topMarginValue: heightSize/20,insideText: &quot;Testibulum arcu elit, interdum vel porttitor eu.&quot;,context: context),
TextBox(leftMarginValue: widthSize/80,topMarginValue: heightSize/20,rightMarginValue: widthSize/4-widthSize/80,insideText: &quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;,context: context),
],
),
),
),
],
),
),
),
],
);

page 2 (expanded and fitted removed from Stack):

child: Stack(
children: [
Container(

          height: heightSize / 8,
width: widthSize / 5,
decoration: BoxDecoration(
borderRadius: BorderRadiusDirectional.circular(22),
color: Colors.grey,
border: Border.all(color: Colors.white, width: 2),
),
child: Center(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: widthSize / 80,
end: widthSize / 80,
top: heightSize / 80,
bottom: heightSize / 80),
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,
insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),
),
),
],
),

If I build the above codes, the gray goes away.
here is the build example of the new codes
[enter image description here][3]
[1]: https://i.stack.imgur.com/fb541.png
[2]: https://i.stack.imgur.com/rwSF9.png
[3]: https://i.stack.imgur.com/I2ZV2.png
</details>
# 答案1
**得分**: 0
是的，我修复了错误。
灰色是因为我在堆叠结构中使用了不正确的布局小部件。
这是最令人困惑的部分。当你得到**调试**时，这些错误可以被修复，但当你得到**构建**时，它会导致变灰。
有3个步骤可以移除这段代码中的灰色。
before : [点击这里输入图片描述][1]
1- 在下面的代码中，需要移除`Positioned.fill`小部件。
当你移除这个小部件时，你将移除覆盖屏幕的灰色。
after : [点击这里输入图片描述][2]

return Stack(
children: [
Positioned.fill( //你必须移除这个小部件来解决问题
child: Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
),


before : [点击这里输入图片描述][3]
2- 为了解决侧边栏变灰的问题，需要移除包裹文本的`Expanded`。
after : [点击这里输入图片描述][4]

child: Expanded( //你必须移除这个小部件来解决问题
child: FittedBox(
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,

                    insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),


before : [点击这里输入图片描述][5]
3- 需要移除`AnimetedTextKit`中的`Expanded`小部件，以解决页面内容中的变灰问题。
after : [点击这里输入图片描述][6]

child: Expanded( //你必须移除这个小部件来解决问题
child: AnimatedTextKit(

      animatedTexts: [
TypewriterAnimatedText(
insideText,
textAlign: TextAlign.center,
textStyle:  TextStyle(
//was 20
fontSize: widthSize/150+heightSize/150,
color: Colors.white,
height: heightSize/500 ,
),
speed: const Duration(milliseconds: 200),
),
],
totalRepeatCount: 4,
pause: const Duration(milliseconds: 99000),
displayFullTextOnTap: true,
stopPauseOnTap: true,
),
),


[1]: https://i.stack.imgur.com/4J13U.png
[2]: https://i.stack.imgur.com/q185g.jpg
[3]: https://i.stack.imgur.com/prbTd.jpg
[4]: https://i.stack.imgur.com/qYCgK.jpg
[5]: https://i.stack.imgur.com/uJaC1.jpg
[6]: https://i.stack.imgur.com/CyEjf.jpg
<details>
<summary>英文:</summary>
Yes, I fixed the error.
The graying is because I used incorrect layout widgets in the stack structure.
Here is the most confusing part. When you get **debug**, these errors can be fixed, but when you get **build**, it causes graying.
There are 3 steps to remove the gray for this code.
before : [enter image description here][1]
1- In the code below, it is necessary to remove the `Positioned.fill` widget.
When you remove this widget you will remove the gray that covers the screen.
after : [enter image description here][2]

return Stack(
children: [
Positioned.fill( //you have to remove this widget to solve the problem
child: Container(
child: Image.asset(
"ImageAssets/mobile.gif",
fit: BoxFit.fill,
),
),
),


before : [enter image description here][3]
2- To solve the problem that the sidebar is gray, the expanded that wraps the text needs to be removed
after : [enter image description here][4]

child: Expanded( //you have to remove this widget to solve the problem
child: FittedBox(
child: Text(
softWrap: false,
overflow: TextOverflow.ellipsis,

                    insideText,
style: TextStyle(
fontSize: widthSize / 50, color: Colors.white),
),
),


before : [enter image description here][5]
3- The expanded widget in AnimetedTextKit needs to be removed to solve the graying problem in the page&#39;s content.
after : [enter image description here][6]

child: Expanded( //you have to remove this widget to solve the problem
child: AnimatedTextKit(

      animatedTexts: [
TypewriterAnimatedText(
insideText,
textAlign: TextAlign.center,
textStyle:  TextStyle(
//was 20
fontSize: widthSize/150+heightSize/150,
color: Colors.white,
height: heightSize/500 ,
),
speed: const Duration(milliseconds: 200),
),
],
totalRepeatCount: 4,
pause: const Duration(milliseconds: 99000),
displayFullTextOnTap: true,
stopPauseOnTap: true,
),
),


[1]: https://i.stack.imgur.com/4J13U.png
[2]: https://i.stack.imgur.com/q185g.jpg
[3]: https://i.stack.imgur.com/prbTd.jpg
[4]: https://i.stack.imgur.com/qYCgK.jpg
[5]: https://i.stack.imgur.com/uJaC1.jpg
[6]: https://i.stack.imgur.com/CyEjf.jpg
</details>

huangapple
  • 本文由 发表于 2023年2月19日 21:50:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/75500588.html
  • flutter
  • flutter-dependencies
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定