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.
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 :
----
build result
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.
-------------------------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.)
-------------------------edit3----------------------------
I found another similar question in SO.
-------------------------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
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,
),
),
- How to pin TextField in SliverAppBar while Scrolling in Flutter?
- Why won't my Flutter web app debug open in the browser?
- getting this error: java.net.BindException: Address already in use: Cannot bind
- How to disable animation at the edges of PageView?
- How does the Flutter framework handle asynchronous programming,
- Critical security vulnerability in reCAPTCHA Enterprise
- Error: 'CarouselController' is imported from both Package in Flutter
- How to customize a date picker
- Limited access to photos giving full access on iOS, when using image_picker on flutter
- How do I get flutterfire configure command to work?
- Flutter build for iOS simulator
- Connect from ios device to localhost
- Flutter VS code plugin stuck Waiting for connection from debug service on Chrome
- Shape of FilterChip in flutter
- Where are the icons from?
- PlatformException(invalid_image, Cannot load representation of type public.jpeg, NSItemProviderErrorDomain, null)
- Flutter TabBar item not filling all remaining space
- Flutter - Error: The getter X isn't defined for the class
- How do I return a FileResponse (or StreamingResponse) in flet-fastapi?
- onPressed "invalid constant value" error in Flutter
- Flutter GetX Re-Initialise GetX Controller Reset GetX Controller, Reset GetX Controller Values
- "Your Android App Bundle has more than 1 certificate chain."
- How to solve "RangeError (index): Invalid value: Only valid value is 0: 1" error
- analysis_options.yaml the included file not found
- how to show CircularProgressIndicator while loading Image.file in flutter
- BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 61 on Apple Arm
- Flutter image generation in background
- How to solve flutter web api cors error only with dart code?
- Rectangle component with round corners
- Can I use SQLite Flutter for web apps?