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,
),
);
},
),
Related
I am not able to show a circular loading indicator or an image while flutter is loading the image from the network.
image: DecorationImage(
image: NetworkImage(
Juegos_de_siempre[index].url_foto,
),
fit: BoxFit.fill,
),
Flutter's documentation suggested the usage of FadeInImage for the placeholder functionality. Here's a link to an example on Flutter's documentation.
You cannot use FadeInImage inside a DecorationImage, so you have to wrap it inside a Stack instead like shown in this thread.
Use CacheNetworkImage Package.Click here.
This is sample code.
CachedNetworkImage(
width: 100,
height: 100,
fit: BoxFit.cover,
imageUrl: imageUrl,
placeholder: (context, url) => const Center(
child: CupertinoActivityIndicator(),
), // replace with your asset image
errorWidget: (context, url, error) =>
const Icon(Icons.error),
),
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'),
),
),
)
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),
),
),
],
),
I want to show CachedNetworkImage in CircleAvatar Widget but backgroundImage parameter require ImageProvider.
Use CachedNetworkImageProvider
Creates an ImageProvider which loads an image from the url, using the
scale. When the image fails to load errorListener is called.
If what you want is just a circle-shaped CachedNetworkImage, you can use ClipOval:
ClipOval(
child: CachedNetworkImage(
width: 32,
height: 32,
fit: BoxFit.cover,
imageUrl: 'BLA.jpg',
placeholder: CircularProgressIndicator(),
),
),
please use imageBuilder from CachedNetworkImage
CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
fit: BoxFit.contain,
imageUrl: imagePath,
imageBuilder: (context, imageProvider) { // you can access to imageProvider
return CircleAvatar( // or any widget that use imageProvider like (PhotoView)
backgroundImage: imageProvider,
);
},
)
If your intention is to show the image inside a circular.
Use:
ClipRRect(borderRadius: BorderRadius.circular(100),
child: CachedNetworkImage(...))
If you want to convert the CachedNetworkImage into ImageProvider
Use:
CachedNetworkImageProvider(url)