I'm trying to fade in a decoration image and can't figure out how.
The image property needs an ImageProvider, while FadeInImage widget is a StatefulWidget.
This is what I've tried to work with:
decoration: BoxDecoration (
image: DecorationImage(
fix: BoxFit.cover,
image: ...
),
)
You're not going to be able to animate a DecorationImage. As you've stated, DecorationImage only provides an ImageProvider, which doesn't really allow for animation (at least as far as I know).
You might be able to write a new AnimatedDecorationImage by taking part of the code from DecorationImage and editing it, but that would be pretty complicated.
What I'd recommend is instead to use a stack to simulate the same thing as DecorationImage. This would allow you to use the FadeInImage widget.
That would look something like this:
Stack(
children: [
FadeInImage(
placeholder: MemoryImage(....),
image: NetworkImage(...),
),
<your widget, I assume a container?>
],
)
Related
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,
),
)
this is my code using network image inside box decoration.It works completely fine.
Container(
decoration: new BoxDecoration(
borderRadius:BorderRadius.circular(24.0),
image: DecorationImage(
image: new NetworkImage(img),
fit: BoxFit.fill,
)
)
),
)
I want to change images from network to asset image so I can use images from assets folder.
Change new NetworkImage(img) to
Image.asset("path/to/image").image
or
AssetImage("path/to/image")
This will load an image from the assets instead of the internet.
I'm currently creating Updating Image process in Flutter app.
I already succeed getting image that pass from some widget defined in View.dart to UpdateScreen widget defined in Update_screen.dart by using Network Image.
CircleAvatar(
radius: 100,
backgroundImage: NetworkImage(
'${Urls.BASE_API_IMAGE}/${widget.imageUpdate}'),
),
My question is, how to set default image using Image.file() ? , because I must use Image.file() for updating data.
Thank's
My full source code :
My Full Source Code Here
you can use this package cached_network_image as it makes it simple to set a default image.
Example
CachedNetworkImage(
imageUrl: "your url",
placeholder: (context, url) =>Your default Image Widget(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
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,
),
),
I am loading images using Image.network for each item in a list using the following code:
Image getEventImageWidget(AustinFeedsMeEvent event) {
return event.photoUrl.isNotEmpty ?
Image.network(
event.photoUrl,
width: 77.0,
height: 77.0,
) : Image.asset(
'assets/ic_logo.png',
width: 77.0,
height: 77.0,
);
}
When I scroll up and down, the list sometimes hangs when loading the images. Is there a way I can load the images on a background thread? What can I do to help fix scrolling performance?
NOTE: When I looked back at this, I found that the images that I was using were really large.
There are two was to speed up the rendering of your ListView of images.
The first is to set the cacheExtent property to a larger value in your ListView constructor. This property controls how much offscreen widgets are rendered, and will help by causing the rendering to start a bit sooner.
The second is to pre-cache your images using precacheImage. Flutter has an in-memory cache, so it is generally to necessary to cache everything to disk to get good read performance. Instead, you can ask Flutter to download these images ahead of time so that they are ready when the widget is built. For example, if you have a list of urls of your image, then in an initState method you could ask Flutter to cache all of them.
final List<String> imageUrls = [ /* ... */ ];
#override
void initState() {
for (String url in imageUrls) {
precacheImage(new NetworkImage(url), context);
}
super.initState();
}
Are you sure your images are not very heavy? Check the size of the images first.
Also you can use the package named: cache_network_image
It's very simple :
new Image(image: new CachedNetworkImageProvider(url))
UPDATE (Package was updated)
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
you can also use:
FadeInImage.assetNetwork(
placeholder: 'assets/ic_logo.png',
image: event.photoUrl,
height: 77.0,
width: 77.0,
fit: BoxFit.cover,
fadeInDuration: new Duration(milliseconds: 100),
),
but yeah, per diegoveloper, you sure your images aren't huge? Listview has no problem rendering anything that's close to reasonable in size.
You can create a Stateful Widget that creates the ListView with placeholder images, then have it have an async method you call after build() that loads the images from network (one by one) and then changes the state of the previously mentioned widget to replace the placeholder with the correct image. As a bonus, you can create a cache that stores the images so they don't have to be downloaded each time the ListView enters scope (here you would have the async method look in the cache for the image and if it doesn't find it there, download it).
As a side note, this would obviously require giving each of the images in the ListView an index.