I use a FlexibleSpaceBar but only for an image. The AppBar is always on top so there is no transition between these 2 elements at all, just the effect of scrolling the image up using parallax.
So I don't need to make the opacity effect for the image.
I know it's possible because I've seen it on Aliexpress's app, which I know it uses Flutter. You can see the no opacity effect here:
https://youtu.be/ESSsY2m7vTY?t=28
when mine is looking like this:
https://youtu.be/Jnm9jN4-wWY
This is my widget:
FlexibleSpaceBar(
collapseMode: CollapseMode.parallax,
background: Hero(
tag: widget.newRent == false
? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
: 'new-rent-image',
child: _imageEdited == false
? myRent['images'].isNotEmpty
? CachedNetworkImage(
imageUrl: myRent['images'][0],
fit: BoxFit.cover,
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
errorImage(context),
)
: Provider.of<MyRents>(context, listen: false)
.newGalleryImages
.isNotEmpty
? Image.file(
Provider.of<MyRents>(context, listen: false)
.newGalleryImages[0],
fit: BoxFit.cover)
: Container(
padding: const EdgeInsets.all(20.0),
child: Image(
image:
AssetImage('assets/images/icon.jpg'),
),
)
: Image.file(myRent['images'][0], fit: BoxFit.cover),
),
),
After removing all the checks it's a basic FlexibleSpaceBar with a Hero transition, nothing fancy
I think the problem is because it is indeed a "Bar" like the name of the widget says: FlexibleSpaceBar. You would have to propably extend this function and overwrite this behaviour or maybe you could use this:
https://pub.dev/packages/stretchy_header
Followed this approach:
https://stackoverflow.com/a/58973381/4858133
Stack(
children: <Widget>[
Positioned.fill(
child: Hero(
tag: widget.newRent == false
? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
: 'new-rent-image',
child: _imageEdited == false
// TODO: move it to a separate function
? myRent['images'].isNotEmpty
? CachedNetworkImage(
imageUrl: myRent['images'][0],
fit: BoxFit.cover,
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
errorImage(context),
)
: Provider.of<MyRents>(context, listen: false)
.newGalleryImages
.isNotEmpty
? Image.file(
Provider.of<MyRents>(context,
listen: false)
.newGalleryImages[0],
fit: BoxFit.cover)
: Container(
padding: const EdgeInsets.all(20.0),
child: Image(
image: AssetImage(
'assets/images/icon.jpg'),
),
)
: Image.file(myRent['images'][0],
fit: BoxFit.cover),
),
),
],
),
Related
I am trying to add Hero animation for a Network Image.
The problem is, when I navigate from one screen to another the image loads again on second screen and so I am not able to see the animation.
After loading complete, if I repeat this navigation (from 1st screen to 2nd) this is working fine.
So the question is, How can I achieve this animation when I navigate for first time?
Error-Output:
Click Here
Code:
FirstScreen.dart
Hero(
tag: 'tag',
child: Image.network(
'https://...',
cacheHeight: 1080,
cacheWidth: 1080,
fit: BoxFit.none,
scale: 5,
),
),
secondScreen.dart
Hero(
tag: 'tag',
child: Image.network(
'https://...',
),
)
With CachedNetworkImage:
firstScreen.dart
Hero(
tag: tag
child: CachedNetworkImage(
imageUrl: 'url',
fit: BoxFit.scaleDown,
height: 200,
width: 200,
memCacheHeight: 1080,
memCacheWidth: 1080,
errorWidget: (context, url, error) => Image.asset('assets/..'),
),
)
secondScreen.dart
Hero(
tag: tag,
child: CachedNetworkImage(
imageUrl: 'url',
errorWidget: (context, url, error) => Image.asset('assets/...'),
),
),
create loading builder in the network image widget and use a placeholder instead of image when the image is not fully loaded something like this
Image.network(
imagePath,
// width: 100,
// height: 100,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Container(
width: 100,
height: 100,
child: Center(
child: // PlaceHolderWidget()
),
);
},
// fit: BoxFit.none,
)
Im trying to make a flutter app for HR and for my employee's section I need to have it so that their initials are shown if a profile picture is unavailable is there a widget which allows me to do this?
Below is an example of what im trying to achieve
You can try it with CachedNetworkImage
CachedNetworkImage(
imageUrl: "http://myimage...",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Text("my initials here"),
),
You need to Do Something Like This, but first Need to check for Image thats depends on how you are managing data and then
_isImageAvailable ? ProfileImage() : Text(Name)
Container(
height: 100.0,
width: 100.0,
color: Colors.grey,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: hasImage
? Image.network(
imageUrl,
fit: BoxFit.contain,
)
: Center(
child: Text('$nameInitial'),
),
),
)
My app was able to attach some picture and show it. I want the user to be able to see the image picture in full size so I'm trying to use photo_view but I'm not getting the result what I want. I used gesture detector to trigger the app so the image will open on tap. How can I achieve that?
error: The argument type #NetworkImage or CachedNetworkImage# can't be assigned to the parameter type 'ImageProvider?'. (argument_type_not_assignable at [tiket_kerja] lib\screens\main_pages\main_detail_ticket_page.dart:2785)
Here's my code:
GestureDetector(
child: CachedNetworkImage(
imageUrl: ticketData[
'picture_attachment_map']
[
'image_${index + 1}'],
height: 150.h,
fit: BoxFit.cover,
),
onTap: () {
print('Imaged clicked');
PhotoView(
imageProvider: CachedNetworkImage(
imageUrl: ticketData[
'picture_attachment_map']
[
'image_${index + 1}'],
height: 150.h,
fit: BoxFit.cover,
),
);
},
),
As Error can't be assigned to the parameter type 'ImageProvider It seems you have to use ImageProvider. In this case you have to replace CachedNetworkImage with CachedNetworkImageProvider
So your code should be like
GestureDetector(
child: CachedNetworkImage(
imageUrl: ticketData[
'picture_attachment_map']
[
'image_${index + 1}'],
height: 150.h,
fit: BoxFit.cover,
),
onTap: () {
print('Imaged clicked');
PhotoView(
imageProvider: CachedNetworkImageProvider(
imageUrl: ticketData[
'picture_attachment_map']
[
'image_${index + 1}'],
height: 150.h,
fit: BoxFit.cover,
),
);
},
),
I've just implemented the Flutter package cached_network_image and I wonder how I can preload images so they're available later in an instant. I retrieve all image-urls that will be used later from the our server.
I've defined my custom cache manager getter:
class LocalCacheManager {
static const key = 'customCacheKey';
static CacheManager instance = CacheManager(
Config(
key,
stalePeriod: const Duration(days: 14),
maxNrOfCacheObjects: 200,
repo: JsonCacheInfoRepository(databaseName: key),
fileSystem: LocalCacheFileSystem(key),
fileService: HttpFileService(),
),
);
}
Here's how I currently try to preload the image:
LocalCacheManager.instance.downloadFile(MY_IMAGE_URL)),
And here's how I create the widget:
child: CachedNetworkImage(imageUrl: MY_IMAGE_URL, cacheManager: LocalCacheManager.instance),
But I can clearly see that files are always cached again as soon as I create the CachedNetworkImage.
You can use Flutter Cache Manager like this
DefaultCacheManager().downloadFile(MY_IMAGE_URL).then((_) {});
Later, just use your cached image like this
child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),
Simplest and workable way is to use precacheImage (flutter build-in function) with CachedNetworkImageProvider:
Image image = Image(
image: CachedNetworkImageProvider(/* url */),
fit: BoxFit.cover,
);
precacheImage(image.image, context);
return Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: image,
),
);
cached_network_image: ^2.0.0
CachedNetworkImage(
imageUrl: yoururl,
errorWidget: (context, url, error) => Text("error"),
imageBuilder: (context, imageProvider) => CircleAvatar(
radius: 120,
backgroundImage: imageProvider,
),
placeholder: (context, url) => CircularProgressIndicator(
backgroundColor: primary,
),
),
I am trying to create something like CircleAvatar, but with a Stacked widget having a CircularProgressIndicator and a FadeInImage.memoryNetwork as children so that I get a nice loading animation (bonus: placeholder image) when I fetch the image on slow Internet.
Everything else is working fine but I am not being able to figure out how to crop the fetched image into a circular form. I read here that I can use a ClipOval, but I couldn't find any tutorial on how to use it.
Stack(children: <Widget>[
Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image:
'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
),
),
],
),
));
Note: I am using transparent_image library for the placeholder to get a transparent placeholder while displaying the loading animation.
This is what I am using in one of my projects, I guess you can create something similar, then instead of using FadeInImage directly use the custom widget.
class AvatarFadeImage extends StatelessWidget {
final String imageUrl;
AvatarFadeImage(this.imageUrl);
#override
Widget build(BuildContext context) {
return ClipOval(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageUrl,
fit: BoxFit.contain,
),
);
}
}
Use it like this:
Stack(children: <Widget>[
Center(child: CircularProgressIndicator(valueColor: new AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
Center(
child: AvatarFadeImage("https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg"),
),
],
),
));
PS: You may also look at https://pub.dartlang.org/packages/cached_network_image and https://flutter.io/cookbook/images/cached-images/
Plugin might just do the trick for you.
Just in case this helps anyone, the modified code which worked for me:
Stack(
fit: StackFit.passthrough,
children: <Widget>[
Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.lightBlue))),
Center(
child: ClipOval(
child: FadeInImage.memoryNetwork(
fit: BoxFit.contain,
placeholder: kTransparentImage,
image: 'https://s3-media2.fl.yelpcdn.com/bphoto/7BlRoSOG3AsAWHMPOaG7ng/ls.jpg',
),
),
),
],
),
));