I am trying to cover the entire canvas with an image. For this, I am using BoxFit.cover enum. But it is not working.
Code :
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body:
Image(
image: AssetImage("assets/choco.jpg"),
fit: BoxFit.cover,
),
),
);
}
}
Output Screenshot :
Why is it not covering the entire screen? None of the BoxFit enum values are working. Please explain in detail. Thank you.
Stack also has a fit property, so set fit to StackFit.expand.
Stack(
fit: StackFit.expand,
...
More info here: https://docs.flutter.io/flutter/widgets/Stack/fit.html
If you don't have a parent widget for you Image try using the height and width property.
Image(
image: AssetImage("assets/choco.jpg"),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Images are not knowing the width to cover.
Wrap your image with a Container() and set width: double.infinity, for it.
Container(
width: double.infinity,
child: Image(
image: AssetImage("assets/choco.jpg"),
fit: BoxFit.cover,
),
),
Related
This question already has answers here:
How to make Before-After image slider view in Flutter
(2 answers)
Closed 9 months ago.
I want to make to make one page in flutter, that take two images and give the possibility to compare them, having one slider that make one image grow in weight.
But i had problem fixing the image size from the changing container, so the question is: How i can fix the size to take all the weight but the container change his weight without change the image visualization?
After the code i add one snapshot of the working code, but like you can see that they are the same image, and i have the slider in the middle the image should be the "same". At this moment the image is modify based in the container size.
class ImageComparePage extends StatefulWidget {
late ImageOfDimension imageOne;
late ImageOfDimension imageTwo;
ImageComparePage({required this.imageOne, required this.imageTwo});
#override
_ImageComparePageState createState() => _ImageComparePageState();
}
class _ImageComparePageState extends State<ImageComparePage> {
double opacityValue = 0.5;
#override
void initState() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
FlutterI18n.translate(context, "image_compare.title"),
),
),
body: Column(
children: [
Slider(
value: opacityValue,
min: 0,
max: 1,
onChanged: (rating) {
setState(() {
opacityValue = rating;
print(opacityValue);
});
},
),
Expanded(
child: Stack(
fit: StackFit.passthrough,
children: [
imageTwoToCompareWithOpacity(),
imageOneToCompare(),
],
),
)
],
),
);
}
Widget imageOneToCompare() {
return Container(
width: MediaQuery.of(context).size.width * opacityValue,
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: FileImage(File(widget.imageOne.path)), fit: BoxFit.cover),
),
);
}
Widget imageTwoToCompareWithOpacity() {
return Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
// colorFilter: new ColorFilter.mode(
// Colors.black.withOpacity(opacityValue), BlendMode.dstATop),
image: FileImage(File(widget.imageTwo.path)),
fit: BoxFit.cover),
),
);
}
}
I faced some problems in my flutter app when I use network image:
the image takes too much time to load.
I found the solution by adding loading Builder prosperity in the network.image widget like that :
Image.network( 'URL image}',
fit: BoxFit.fitHeight,
loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null ?
loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
),
This works out right now, but then I need to add the same property (loadingBuilder) with the NetworkImage class (into the BoxDecoration)
as follows:
image: DecorationImage(
image: NetworkImage(widget.cover),
fit: BoxFit.cover,
),
How do I add the loadingBuilder with the NetworkImage class (in the last part of the code)?
There is a solution that I used although it seems like trick.
Using 'Stack' widget, at first show loading widget and draw image widget over that.
If that, at first loading widget will be shown and after image loading completed, image will be shown over the loading widget.
Stack(
children: <Widget>[
// Locate loading widget
LoadingWidget(),
//
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.cover),
fit: BoxFit.cover,
),
),
),
],
);
Can someone tell me why the picture cannot be displayed?
#
When I take a picture from the Internet with "NetworkImage" it works. Is there a local solution too?
#
I tried a lot around but even the posts here in the forum can not help me.
# To add assets to your application, add an assets section, like this:
assets:
- images/mio.jpg
-
import 'package:flutter/material.dart';
void main() {
runApp(Main());
}
class Main extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 250,
height: 250,
color: Colors.grey,
child: Stack(
children: <Widget>[
Container(
width: 200,
height: 300,
color: Colors.green,
),
Positioned(
top: 0,
right: 0,
child: Container(
width: 200,
height: 300,
child: Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
),
),
),
],
),
),
),
);
}
}
I get this error message
I'm not sure why you are getting this error but you should try
Asset.Image(
'images/mio.jpg',
fit: BoxFit.contain,
),
instead of
Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
),
another suggestion would be to not declare all your images in your pubspec.yaml, because there is a chance of human mistype error, you should just declare the root folder of your images, in your case
assets:
- images/
Here's three solution
First make sure that there's only one tap before assets and two taps before the image path
Second change these lines of code
Image(
fit: BoxFit.contain,
image: AssetImage(
'images/mio.jpg',
),
and write this instead that works for me
Image.asset(
'images/mio.jpg',
fit: BoxFit.cover,
),
Third use flutter clean than flutter run
It uses the background image for whole application.
So My plan is use Stack including backgroundimage and Scaffold on it.
In this code, it shows Title.png but dosent show BackGround.png
Where should I fix??
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Stack(
children: <Widget>[
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
],
),
);
}
I think it is showing your "BackGround.png" image. But, "Title.png" image is overlay above it. That's why you're not able to view it.
To check out if it is rendered or not just replace your code as following,
home: Stack(
children: <Widget>[
Scaffold(
body: Center(
child: Image.asset('images/Title.png')
),
),
new Image.asset('images/BackGround.png',
fit: BoxFit.cover,
),
],
),
Stack always renders his first child, then second and then so on. So, in your case, whichever background you want to upload above all, should be on top.
Place your Scaffold inside Container with a background image and use Colors.transparent for Scaffold's backgroundColor property like this:
Container(
//your image here
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
//your Scaffold goes here
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(),
),
);
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',
),
),
),
],
),
));