I am using ImageNetwork for loading the gif but its getting cropped after one complete circle .
The same gif working fine in android natively.
Here is the code i am using :
Image.file("gif_url",
height: ScreenUtil().setHeight(250),
width: ScreenUtil.screenWidthDp,
fit: BoxFit.fitHeight)
Below is the link of the result video of the gif i am getting.
With Flutter i am getting this result:
With Native i am getting this result:
I want the same result as in Native one.
Please let me know how can i achieve that
try Image.asset like following:
Image.asset(
AssetUtils.loader // path to gif file,
alignment: Alignment.center,
fit: BoxFit.scaleDown,
height: MediaQueryUtils(context).height * 0.1,
width: MediaQueryUtils(context).height * 0.1,
),
Related
after turning off the internet i gets this error: "Remove network images from cache on any exception during loading"
my app fetch pictures from api. how can i fix this bug how i prevent that?
return Column(children: [
GestureDetector(
child: Image.network(thumbnailUrl))])
You can use the Cached Network Image Plugin if you are developing for android and ios. In Web, the plugin is not working as expected.
Use the following as a widget for your application.
import 'package:cached_network_image/cached_network_image.dart';
Widget commonCacheImageWidget(String? url, {double? width, BoxFit? fit, double? height}) {
if (url!.startsWith('http')) {
return CachedNetworkImage(
placeholder: (context, url) => Image.asset('assets/path....', fit: BoxFit.cover),
imageUrl: url,
height: height,
width: width,
fit: fit,
);
} else {
return Image.asset(url, height: height, width: width, fit: fit);
}
}
In Placeholder you can have any widget, here am using a local image that is stored as an asset.
Or You can check whether the internet connection is there or not before loading the image and change that to some other widget.
The screenshot says it all.
On the left is flutter run -d chrome and the blue gradient, which is a result of BoxDecoration being added to a Container.
On the right is flutter build web followed by firebase deploy --only hosting. The build web command runs with no errors and the deploy command uploads with no errors, but the gradient, as you can see, is gone, resulting in a gray background.
Since flutter does not produce any typical html files or css that I can find it is pretty much impossible to inspect or find why the gradient is not working in the produced web files. Any thoughts on what I am missing with flutter build web considerations or is this a bug that needs to be reported to flutter?
/// In class "TopClipper"
static get gradient => const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Color(0xFF333F7A),
Color(0xFF9CBCD9),
],
),
);
/// This ClipPath and call to gradient is in another file
/// that is in a SliverPersistentHeader delegate.
ClipPath(
clipper: TopClipper(),
child: Container(
/// Calling static "gradient" above.
decoration: TopClipper.gradient,
width: double.infinity,
height: expandedHeight,
child: const Spacer(),
),
)
UPDATE and FIX
Thanks to #IvoBeckers comment regarding an unexpected gray background being indicative of an error, I checked the logs, which I should have paid more attention to, even though it did render, minus the gradient.
And sure enough there was an EXCEPTION CAUGHT BY WIDGETS LIBRARY pointing to my incorrect use of Spacer() as the only child of Container(). It was unnecessary as well because the container will grow to it's set width/height anyway.
Removing Spacer() removed all errors and now flutter run -d chrome --release displays the gradient.
ClipPath(
clipper: TopClipper(),
child: Container(
/// Calling static "gradient" above.
decoration: TopClipper.gradient,
width: double.infinity,
height: expandedHeight,
),
)
How can I fix this SVG error ?
Also this is my Svg widget:
SvgPicture.asset(truckSVG,
width: 80,
height: 80,
color: ColorConstants.birincilRenk,
),
Unfortunately, flutter_svg don't support all svg feauters. Your svg file contains <style> tag that is unsupported by the library.
To solve it, you can use svgcleaner or any other tool to clean unnecessary data from svg image.
The error log clearly states, it doesn't accept "print" units like mm (most certainly the same for inch etc.).
To achieve a DIN A4 aspect ratio, you could fix your width and height values by using pixels or percentages:
width: 210px;
height: 297px;
width: 70.707%;
height: 100%;
width: 100%;
height: 141.4286%;
Im using Image.Network to display a image based on a URL :
ClipOval(
child: Image.network(
'http://myurl${userId}.png',
width: 100,
height: 100,
fit: BoxFit.cover,
key: profileImageKey,
),
),
I'm trying get the user to upload a new profile image, however, i'm retaining the same filename (userid + .png). Once the user has uploaded the image the above is display is not displaying the new image.
I've tried rebuilding the widget using :
setState(() {
//generateKey();
profileImageKey = ValueKey(new Random().nextInt(100));
userId = userId;
});
I've also tried removing the url from the cache using :
PaintingBinding.instance.imageCache.evict('http://myurl${userId}.png');
However, none of these methods work. Is there a way to update the Image.Network to download and use the new image that was uploaded ?
Thanks
Based on #pskink's comment https://stackoverflow.com/a/60916852/2252830
The solution to this question was to use the evict method on Image. So I refactored my code to below :
Image profileImage;
...
profileImage = Image.network(
'http://myurl${userId}.png',
width: 100,
height: 100,
fit: BoxFit.cover,
key: profileImageKey,
);
...
ClipOval(
child: profileImage,
),
...
profileImage.image.evict();
setState(() {
//generateKey();
profileImageKey = ValueKey(new Random().nextInt(100));
userId = userId;
});
I have a FadeInImage in my app, with the image loaded in response to a user action. This means at runtime, I dont know the image, and just want the FadeInImage to not display anything.
If I pass in null for the image, or an empty string, I get a runtime error.
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following ArgumentError was thrown resolving an image codec:
flutter: Invalid argument(s): No host specified in URI file:///
Here it the relevant Widget declaration:
Container(
height: 100,
child:FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: _d2apiModel.emblemUrl,
fit: BoxFit.fitWidth,
),
(where _d2apiModel is a Provider which is updated based on user actions).
I know I could put a default image in the asset bundle, copy it out of the bundle to the doc storage, get the file URI for the image, and use that as the default but 1) that seems like overkill, 2) i run into some async issues.
It seems like I am missing something obvious, but I cant figure out the approach. Any suggestions would be appreciated.
You can show a regular Image with kTransparentImage while your provider hasn't been updated, and then show your FadeInImage when it updates:
Container(
height: 100,
child: hasProviderBeenUpdated
? Image.memory(
kTransparentImage,
fit: BoxFit.fitWidth,
)
: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: _d2apiModel.emblemUrl,
fit: BoxFit.fitWidth,
),
),