Hi I'm loading my profile pics from my server in Image.network and showing it in a pageview to show next pictures. But when my image load from the internet it become a glitch as shown in the picture.
But when i open the same link in google chrome there is no glitch in my profile pic
This is the code is what i used to list
photos.forEach((photo) {
profileImages.add(
Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
image: NetworkImage(
APis().imageApi(
photo.photoName,
),
),
filterQuality: FilterQuality.low,
fit: BoxFit.cover,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
gradient: LinearGradient(colors: [
Colors.black12,
Colors.transparent,
Colors.black,
], stops: [
0.25,
0.75,
1.0
], begin: FractionalOffset.topCenter, end: FractionalOffset.bottomCenter)),
),
],
),
),
);
});
print("profileImages :${photos.length} ${profileImages.length}");
}
And this is what i displaying in pageview
PageView.builder(
controller: pageController,
onPageChanged: onPageChanged,
itemCount: profileImages.length,
itemBuilder: (context, position) {
return profileImages[position];
})
So my question is do i have to change anything or do i have to put placeholder?
The way I've handled it is by using a placeholder, so I use a Stack, i put the placeholder image underneath it and then once it loads, it just shows on top.
See the before and after:
And the code just pretty much looks like this:
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Image.asset('assets/placeholder.jpg',
fit: BoxFit.cover,
width: 600.0,
height: 900.0
),
Image.network(imgPath,
fit: BoxFit.cover,
width: 600.0,
height: 900.0
)]))
Related
goal: display an image picked inside a circle.
issue: the image picked is clipped on the sides.
Here is the one that I am using to display the image:
CircleAvatar(
radius: 50.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.file(_photo!,
width: 100, height: 100, fit: BoxFit.fitHeight),
),
)
the code above is used to display the image after I take a picture from the phone
this is what it looks like
The image should look like this ::
this is the code snip for when the image is being displayed correctly:
Widget _buildProfileImage() => CachedNetworkImage(
imageUrl: _cloudUser.userImage,
imageBuilder: (context, imageProvider) => CircleAvatar(
backgroundColor: Colors.grey.shade800,
radius: 50,
backgroundImage: NetworkImage(_cloudUser.userImage),
),
);
the code above is used to display the image that was stored on firebase
I am pretty sure that the issue is with the widget 'ClipRRect' but I dont know what other widget I can use. or maybe thats not the issue at all idk.
use FittedBox widget
Change this:
CircleAvatar(
radius: 50.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.file(_photo!,
width: 100, height: 100, fit: BoxFit.fitHeight),
),
)
to this code below:
ClipRRect(
borderRadius: BorderRadius.circular(100),
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.cover,
child: Image.file(_photo!)),
),
),
As you can see on GIF, CachedNetworkImage() sometimes does not show the loaded image, unless you interact with the page. Please help me figure out why this is happening and how to fix it?
Imgur link for better resolution
SizedBox _buildImage(BuildContext context) {
return SizedBox(
height: MediaQuery.of(context).size.height / 3,
child: Stack(
children: [
Positioned.fill(
child: CachedNetworkImage(
imageUrl: event.pictureUrl,
imageBuilder: (context, imageProvider) {
return Ink.image(
image: imageProvider,
fit: BoxFit.cover,
child: Container(),
);
},
progressIndicatorBuilder: (context, url, downloadProgress) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 50,
height: 50,
child: CircularProgressIndicator(
value: downloadProgress.progress,
color: Colors.black38,
)),
],
);
},
errorWidget: (context, url, error) {
// ignore: avoid_print
print(error);
return Image.asset('assets/images/error.png');
},
),
),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.black,
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.grey.withOpacity(0.0),
Theme.of(context).scaffoldBackgroundColor,
],
stops: const [0.9, 1],
),
),
)
],
),
);
}
I have fixed the problem by changing Ink.image(...) imageBuilder return to:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
);
Which, theoretically, should be the same. But the issue is now gone.
Please, answer the question if you have details on the issue I'll accept an explaination of this behaviour.
Is my network image still overflowing, despite the defined width, and why?
Here is a problematic part of the code:
Container(
height: 200,
width: MediaQuery.of(context).size.width, // This may be helpful, but not in my case...
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
image: NetworkImage("${module['thumbnail']}"),
),
),
),
How to fix overflow?
A RenderFlex overflowed by 28 pixels on the right.
Help, I am a newbie in Flutter. Thanks!
Ps. Updated code from top to problematic :
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SingleModule()),
);
},
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
clipBehavior: Clip.antiAlias,
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage("${module['thumbnail']}"),
),
),
),
Try putting padding: EdgeInsets.only(right: 28), to your Container that wrap around your Image Widget.
I am new in flutter. I want to make the transparent Circle in side the semi transparent rectangle. Look like below,
I have not idea about that. So please help me to make this type of widget in flutter.
Using ColorFiltered and Stack you can achieve this.
(I took the answer mentioned in the comment and edited to your needs)
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://lh3.googleusercontent.com/proxy/_wrP_GRGOkGw0FLMiR3qeMzlyC-qN8Dd4sND89_xxLZMDIZh204g8PCccS-o9WaL1RKyiVOLGVS9QpodSkMMhOh8kbNh1CY492197-im-4vlFRRdsVqT2g4QbRlNgljDIg',
fit: BoxFit.cover,
), //Give your Image here
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.5),
BlendMode.srcOut,
), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
), // This one will handle background + difference out
),
Align(
alignment: Alignment.center,
child: Container(
height: MediaQuery.of(context).size.width,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(
MediaQuery.of(context).size.width / 2,
),
),
),
),
],
),
),
],
),
);
}
I have a profile page layout as its seperated by 2 and 1 positioned for avatar picture. my down container color, ı cant set it seems not working ıdk why. here is my code below:
body: new Stack(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
height: topWidgetHeight,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/9.jpg"),
fit: BoxFit.cover)
),
),
new Container(
color: Colors.red,
)
],
),
new Positioned(
child: new Container(
height: 150,
width: 150,
decoration: BoxDecoration(
image: new DecorationImage(image: new AssetImage("assets/0.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.all(Radius.circular(75.0)),
boxShadow: [
BoxShadow(blurRadius: 7.0, color: Colors.black)
],
),
),
left: (MediaQuery.of(context).size.width/2) - avatarRadius,
top: topWidgetHeight - avatarRadius,
)
],
)
the container is not appearing because you have not given any height and to container
please give it height and width and then try