'Flutter how to handle image with fixed size inside box?
I am new to Flutter and I like it but I am not comfortable building layouts.
I am working on an app that contains a ListView of Cards. Each card is inside a Container and contains an image (with fixed height and width) and a text.
I am not able to place the image correctly inside the Card. I want the image to cover the width of box. Thanks.
This is the code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'MyApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.asset(
'img/britannia.jpg',
width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
],
),
),
);
}
}
Solution 1:[1]
You need to add - crossAxisAlignment: CrossAxisAlignment.stretch, in Column so that children can take up horizontal space.
Working Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'MyApp';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ListView(
children: <Widget>[
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // add this
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
Container(
margin:EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: InkWell(
onTap: () => print("ciao"),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
),
child: Image.network(
'https://placeimg.com/640/480/any',
// width: 300,
height: 150,
fit:BoxFit.fill
),
),
ListTile(
title: Text('Pub 1'),
subtitle: Text('Location 1'),
),
],
),
),
),
),
],
),
),
);
}
}
output:
Solution 2:[2]
I don't know how.. But this really worked to keep image with fixed size in container Just add Alignment in container
Container(
height: double.infinity,
alignment: Alignment.center, // This is needed
child: Image.asset(
Constants.ASSETS_IMAGES + "logo.png",
fit: BoxFit.contain,
width: 300,
),
);
Solution 3:[3]
This worked for me
Image.network(imageUrl, fit: BoxFit.fitWidth,),
Solution 4:[4]
Put Image widget inside container and give alignment center to container and specific width-height to the image.
return Container(
alignment: Alignment.center,// use aligment
color: Color.fromRGBO(0, 96, 91, 1),
child: Image.asset('assets/images/splash_logo.png',
height: 150,
width: 150,
fit: BoxFit.cover),
);Solution 5:[5]
Image.asset(
'assets/images/desert.jpg',
height: 150,
width: MediaQuery.of(context).size.width,
fit:BoxFit.cover
)
Solution 6:[6]
child: Container(
alignment: Alignment.center,// use aligment
child: Image.asset(
'assets/images/call.png',
height: 45,
width: 45,
fit: BoxFit.cover,
),
),
Use this if you want with border
Center(
child: Container(
margin: EdgeInsets.only(top: 75),
width: 120,
height: 120,
alignment: Alignment.center,
child: Image.asset(
"assets/images/call.png",
fit: BoxFit.cover,
height: 45,
width: 45,
),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.all(new Radius.circular(120)),
border: new Border.all(
color: Colors.blue,
width: 4.0,
),
),
),
)
Solution 7:[7]
I used this and worked fine with me!
Container(
width: MediaQuery.of(context).size.width,
height: 175,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(YOUTUBE_THUMBNAIL_PART_ONE +
video.key +
YOUTUBE_THUMBNAIL_PART_TWO),
),
)),
Solution 8:[8]
What you want to do is probably use the size of the bigger container. In that case your media should occupy the whole dedicate space:
return Container(
alignment: Alignment.center,
height: double.infinity,
width: double.infinity,
child: Image.asset(
'', //TODO fill path
height: double.infinity,
width: double.infinity,
fit: BoxFit.cover,
),
);
You can play with the fit value:
BoxFit.coverwill cover the whole containerBoxFit.fitWidthwill fit the width and eventually put horizontal white bars to fill the spaceBoxFit.fitHeightwill fit the height and eventually put vertical white bars to fill the space
Solution 9:[9]
If doable with the fit property, I let this very clear cheat sheet (chapter fit Property) detail everything: https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20
Solution 10:[10]
All you need is fit property of Image class:
Image.asset(
'your_image_asset',
fit: BoxFit.fill, // Expands to fill parent (changes aspect ratio)
)
or
Image.asset(
'your_image_asset',
fit: BoxFit.cover, // Zooms the image (maintains aspect ratio)
)
Solution 11:[11]
I had the same problem, I just added in the Image.asset class the fit:BoxFit.fill after using the MediaQuery class to get the width of the screen**
Container(
child:Image.asset(link,fit: BoxFit.fill,)
width: screensize.width,
height: 150,
))
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow