Flutter app UI disappears after restarting once in apk release - flutter

After downloading the app through the apk release, in the first time, it works normally. But once you close the app and open it again, the ui elements disappears. It has a very strange behavior, if I restart the device, it works in the first time the app is open (after the restart), and after closing it, it doens't work again.
This only happens in the release version, debugging works as expected.
I am using Getx, I don't see a relation since I have already develop other apps with this structure. This is the code of the first page loaded.
return Container(
constraints: BoxConstraints(minWidth: Get.width, minHeight: Get.height),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
image: DecorationImage(
opacity: 0.35,
repeat: ImageRepeat.repeat,
image: AssetImage(AppConstants.assets.background_image),
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: Get.width,
height: Get.height * 0.45,
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: SizedBox(
width: Get.width * 0.8,
height: Get.height * 0.3,
child: Image.asset(AppConstants.assets.logo_image),
),
),
),
),
SizedBox(
height: Get.height * 0.55,
child: TabBarView(
controller: controller.tabController,
physics: NeverScrollableScrollPhysics(),
children: [
TelephoneTab(),
CodeTab(),
],
),
),
],
),
),
),
),
);
I have tried removing the background image by removing the Container before the Scaffold entirely, removing every element in the UI and adding just a small button in the middle. Updating my kotlin.
Tried running with flutter run --release. No logs.
May be the same thing as this.
Flutter doctor is fine.

The problem seems to be something related to the Scaffold and the Container with the background image. Elements outside the Scaffold were drawn as usual.
I changed the first page of the app in order to go directly to the HomePage and it worked fine, even logging out to the LoginPage.
Then I tried creating a SplashPage before the LoginPage, initially, I used the same structure with the Container, BoxDecoration, and Scaffold. The problem was happening again, but this time in the SplashPage, everything inside the Scaffold was invisible with the same behavior as mentioned above.
After that, I simply define the extendBody as true in the Scaffold of the SplashPage and the problem stopped occurring.
I don't exactly understand what this changes. Feel free to add an explanation to this answer.

Related

When zooming in and out in flutter web it resize the image and deformating it

I was building a menu web app for a bussiness. I imported the images to project and tried to resize them on website but they didnt resize as i expected. I want them to stick eachother and when i zoom in or out i dont want them to move away from each other. but now when i zoom in-out, the distance between each other decreases and increases, they are not fixed.
I DONT WANT TO DİSABLE ZOOM IN/OUT. I WANT TO LEARN HOW TO CONFIGURE IMAGES ON WEBSİTE FOR ZOOMİNG NOT FOR THIS PROJECT BUT MAYBE FOR ANOTHER.
Issue video: https://drive.google.com/drive/u/0/folders/1ibH6EgHEFajeFD9cilcI6SeGIPVPKCQU
Scaffold(
backgroundColor: Color.fromARGB(255, 194, 164, 31),
body: GridView.count(
crossAxisCount: 1,
mainAxisSpacing: 10,
padding: EdgeInsets.all(10),
children: <Widget>[
Container(
child: Image.asset('assets/1.png'),
),
Container(
child: Image.asset('assets/2.png'),
),
Container(
child: Image.asset('assets/3.png'),
),
Container(
child: Image.asset('assets/4.png'),
),
],
),
);
The problem is GridView widget's layouting. I've used ListView instead of GridView and problem solved. Because ListView layouts each widget one after another and then you can put a distance between them. So use ListView...

How to compose Flutter code not being stretched in height

I have some experience in Java code, and I am familiar with linear code style where command follows by command, but I can't understand how to write Flutter code with inherited widgets style - my code tends to have hundreds of lines for every widget.
I faced with few constraints:
line length limited to 80 chars
trailing comma is required
So my average code looks like this one:
child: Column(
children: <Widget>[
if (widget.headerWidget == null)
const SizedBox(
height: 14,
),
AnimatedContainer(
foregroundDecoration: BoxDecoration(
color: getForegroundColor(),
),
child: Row(
children: <Widget>[
(widget.isFeed)
? (widget.isNew
? Flexible(
flex: 0,
child: Padding(
padding:
const EdgeInsets.only(
left: middlePadding,
top: middlePadding,
),
child: Container(
height: xSmallPadding,
width: xSmallPadding,
decoration: BoxDecoration(
color: AppColors.magenta,
borderRadius:
BorderRadius.circular(
xxSmallPadding,
),
),
),
),
)
: SizedBox(
width:
widget.isViewed ? 0 : 24.0,
))
: const SizedBox(),
And simple widget become 500+ lines in height. How to avoid it?
you can split your code to small widgets (in flutter every thing is a widget) , there's an easy way for that in android studio you can right click on a widget name like a row and then choose refactor after this choose extract flutter widget , by this you will get all the work done and it will be converted to a flutter widget class ,
also you can extract flutter method but i preferer the flutter widget class so you move it to another file.

Modifying an image dynamically doesn't update the image on the screen

I have this code in my build:
XFile? file;
...
body: Container(
color: Colors.black,
child: SizedBox(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
child: AspectRatio(
aspectRatio: 1,
child: GestureDetector(
onTap: () => editPhoto(),
child: Image.file(File(file!.path))), //here is the line with problems
),
),
)
With my editPhoto() method, I modify the file whose path is read in my Image.file, but in my screen I still see the old image before the edit. Now, I know for sure that the file has effectively changed because in another part of my code I can see the changes, so the problem is that Image.file doesn't update. How can I solve?

loading icon before SVG image Loading

i am created an SVG image for background, but it is loaded after some time, the issue is:
when it is not loaded yet all widgets appears randomly. i just need a loader after the image loaded it page widget appears.
the code is:
Scaffold(
appBar: const _CustomNotificationAppBar(),
body: isFinished
? SingleChildScrollView(
child: Stack(
children: [
//notification background
Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
),
IconButton(
icon: const Icon(
Icons.notifications_active_outlined,
),
onPressed: () {})),
],
),
)
: const Center(
child: CircularProgressIndicator(),
),
);
well if I understands you well and as long as your SVG is loading from the device "asset",
there should not be delay in first place.
I think the problem is you emulator or physical device is too slow , And you may face this problem in debug only
try to run flutter build APK and install that generated APK in your phone and check if problem remains.
however you can achieve that also like this
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Text("I am Loading"),
),
You can wrap it in a Container, and it will work.
For eg:
Container(
//height :desired height,
//width : desired width
child: Opacity(
opacity: 0.42,
child: SvgPicture.asset(
'assets/images/notification_background.svg',
),
))
You can pass a placeholderBuilder to your SvgPicture.asset like this:
SvgPicture.asset(
'assets/images/notification_background.svg',
placeholderBuilder: (context) => Icon(Icons.your_desired_icon),
),
You can also wrap the Icon with a SizedBox if you need to comply with a certain size, or replace it by any other widget that you wish.
More info about the widget you're using is available in its API docs.

Column widget draws a line between children when they are wrapped in specific widget with decoration. How can i cure this?

The problem is visible on the attached screenshot.
Code of a main widget:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Decor(
child: Container(),
),
flex: 1,
),
Flexible(
child: Decor(
child: Container(),
),
flex: 6,
)
],
);
Code of a Decor widget:
Container(
decoration: BoxDecoration(
color: COLOR,
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
Answering in advance "Why would you even need to do such a Decor Widget"? Both flexibles will be populated with data of some sort. Second flexible will be with a ListView inside and the first one will be a "Header" for what is inside a ListView. Data is retrieved from server every 10s, so the main widget is wrapped with a StreamBuilder.
Problem is that StreamBuilder cannot be shrinked to the size of its child, whereas ListView can, so I wrap both "Header" and a ListView in Decor so that grey background color doesn't take all available space on a screen which than produces black line seen on a screenshot?
So the question is: is there a way either to remove the black line between two widgets in a column?
Also, if you know magic of how to shrink StreamBuilder to the size of its child please answer here too.
Ok I know that this is not a very nice solution and more like workaround but I think the only way to get rid of the line is to set border color of the container in your Decor widget
Container(
decoration: BoxDecoration(
color: COLOR,
border: Border.all(width: 0, color: COLOR) //added line
),
margin: const EdgeInsets.symmetric(
horizontal: MEDIUM_PADDING,
),
padding: const EdgeInsets.all(MEDIUM_PADDING),
width: 300.0,
child: child,
);
First I thought setting border width to 0 will help it but that didn't work.. Color did