Flutter NetworkImage takes too long to load - flutter

So i'm trying to load close to a thousand gifs on Inkwell widgets with a Hero child in a boxdecoration imagenetwork, i want to understand the best practice to handle this, as it takes long times to load, i want it to load by the first one to appear, whether it's normal or by filtering, so how do flutter devs handle this ?
So how do i support slow internet users by deciding which NetworkImage to load first
InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder:(context)=>GifDetail(
gifs: gifs,
)));
},
child: Hero(
tag: gifs.url,
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 110,
width: 110,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(gifs.url))
),
),
],
),
),
),
),

You could try using Cached_network_image package. It will still take the same time to load images initially but then the images are retained on the device so will load a lot quicker the next time. There is really no way of getting around the initial download of the image.
Loading via a ListView.builder or GridView.builder will only load the images in the initial view until you scroll, so should also help.

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

Flutter app UI disappears after restarting once in apk release

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.

Flutter Stack: how to place items at the bottom

I have the following widget StackedIcons
reuturn Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(), Positioned(left: 15, child: PlusOne())
]),
);
which I want right aligned inside another widget
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [StackedIcons(match: match)]
)
and this is what I get
This looks good in terms of what I want to achieve (the plus one on top of the user avatar). However it overflows the parent container.
If I use right offset for positioned the order of the icons will be inverted and I don't want that.
If possible I would like to specify to Stack place the element below the current one (rather than on top).
The output I want is to have this widget rigth aligned without going over the padding of the parent. If I remove the Clip.none behaviour I get
A possible solution might be to place your PlusOne inside the green Container, and then give the Avatar some offset on the right instead.
return Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(right: 15, child: CircleAvatar()),
PlusOne(),
]),
);
I'm not sure how this would affect things if you were to have multiple avatars and then the plus icon, but if you haven't tried this, it might work for you.

How to create layout background with 2 different colors in Flutter?

I am trying to make a layout as seen in the image in Flutter, but I don't get how to create a background with two colors and an overlapping button.
I don't know if there is a widget able to do this or need some code...
Any suggest or help will be great! (this was my very first post ever, sorry if there is something wrong about it!!)
Thanks.
Do something like this.
body: Stack(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: 300,
color: Colors.grey,
),
],
),
Positioned(
top: 280,
left: 50,
right: 50,
child: RaisedButton(
color: Colors.white,
child: Text("Your Button"),
onPressed: () {},
),
)
],
),
you will get
Let me know if it works
One possible approach is to use a Stack. Set the background color to your grey (i think, color blind), add the white piece as an image positioned at the bottom. Lastly add your button, again positioned at the bottom.
On closer inspection of your image, I now see that what I thought was an image at the bottom was actuall just a color. All you need are two Container s and a button in a Stack. The first Container should fill the whole space, the second Container should have a height setting (be responsive here for multiple device sizes) and lastly add your RaisedButton.

Different results when run on different screen sizes

I'm getting different results of the same screen when run on different phone sizes:
The second phone screen is my desired outcome. Using expanded initially helped me solve an issue with the first phone screen (where there was an extra space below the green bar). Later I realized that I was getting overflow on the second phone screen. Thus, I solved the overflow by using SingleChildScrollView. However that somehow cause the first phone screen to have the issue of the extra space again.
Code:
final quizBottomContentText = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(left:30.0, right:30.0, top: 30.0, bottom: 30),
child: Text(
questions[questionNum].title,
style: TextStyle(fontSize: 18.0),
)
);
final quizOptions = Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 20.0),
child: Center(
child: Column(
children: questions[questionNum].options.map<Widget>(
(option) => SimpleRoundButton(
backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
buttonText: Text(option,
style: TextStyle(
color: Colors.white
),
),
textColor: Colors.white,
onPressed: (){},
),
).toList(),
)
)
);
final countdown = CountdownWidget(
width: MediaQuery.of(context).size.width,
duration: 20,
triviaState: triviaState,
);
final quizBottomContent = Expanded(
child: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[quizBottomContentText, quizOptions, countdown],
),
)
)
);
Because you're app is not responsive. See, you're passing size in a hard coded way
eg: padding: EdgeInsets.only(bottom: 20.0)
What this means? Mean that in your emulator, you'll get a result, maybe is what you expect, but in another device, maybe in a iPhone Xs Max, the result is diferent, so, what can you do?
You'll have two options here, the first, use the MediaQuery component. I'll show you how and why I use the way I use for a better understanding.
In Flutter, we have the MediaQuery component with a lot of propierty, one of them, is this: MediaQuery.of(context).size.width (Which gets your device's full width size). Everything fine till here, right? If you print this in diferent devices, you'll get diferente results, which means that a Padding with 20 from left/right will be different in both devices.
I made a calculation to kinda ''hack'' this and make it responsive, get this:
MediaQuery.of(context).size.width and divide by 400. Why 400? Me and a friend discovered this and when we divided, we've got a value almost next to 1 in very different devices, so, if you get the result (eg 1.5) and multiplies by 20, you'll make your app kinda of responsive. It's a way, the second way it's to use the LayoutBuilder which need a context and a constraints as parameters.
With constraints, you can manipulate to show differents model designs in differents devices, like, buildConventionalDesig for devices with width less than 400, an example, or buildBiggerDesign for a bigger phone, like iPhone Xs Max.
There's an article that you could be your reference to help you, check it:
Build Response UIs in Flutter. It doesn't cover this trick with MediaQuery, but maybe you can get a new insight.
Hope this have helped.