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

Question

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 "flutter doctor" , "flutter clean" but didnt work.

It doesn't appear that there is an error in the Web Console.

web debug result :

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.

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

-------------------------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

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

I found another similar question in SO.

a link!

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

I noticed a 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) :

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):

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: "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 (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

Do this first: [Web Cache](https://stackoverflow.com/a/61287128/15285043). Then clear your browser's cache. `flutter build web --web-renderer canvaskit --relese`. Then can you build like this and check again? Will it work? — okmsbun, Feb 19 '23 at 16:33
Yes i did.Actually, I don't understand much about inspect to the network, but there is no error. — overload, Feb 19 '23 at 17:41

score 0 · Accepted Answer · edited Mar 06 '23 at 10:18

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- 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

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

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

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

3- The expanded widget in AnimetedTextKit needs to be removed to solve the graying problem in the page's content.

after : enter image description here

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,
        ),
      ),

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

1 Answers1