I know how to set image file in container.
However when I try to set background of Container in ListView, the images can not shown up.
Of course, I wrote these image files in pubspec.yaml.
body: ListView(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/IMG_01.JPG'),
fit: BoxFit.cover,
),
),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/IMG_02.JPG'),
fit: BoxFit.cover,
),
),
),
Give me advice.
Thank you.
Related
I have a code like this:
List backgrounds = ["bg.jpeg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", "bg7.jpg", "bg8.jpg", "bg9.jpg", "bg10.jpg", "bg11.jpg", "bg12.jpg"];
var randomBG;
randomBG = backgrounds[Random().nextInt(backgrounds.length)];
...
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
randomBG.toString()),
fit: BoxFit.fill,
),
),
But getting an error:
How can I solve this problem?
BoxDecoration's image will get on runtime, therefor you cannot use const. Just remove const from BoxDecoration.
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(randomBG.toString()),
fit: BoxFit.fill,
),
),
),
Problem I have space in listview between items (Container) with flutter
Problem I have space in listview between items (Container) with flutter
this code :
return Scaffold(
body: Column(
children: [
Expanded(
child: ListView(
children: [
Container(
width: width,
height: 220,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/exclusion.png'),
// fit: BoxFit.contain,
),
),
),
Container(
width: width,
height: 220,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/exclusion.png'),
// fit: BoxFit.contain,
),
),
),
],
),
),
],
),
);
The height of the container you provided does not reflect the image height, so the image gets centered try to set fit: BoxFit.fill in the DecorationImage so that you see the actual height you need
I want a greenish tint over the non transparent part of the image, a tried searching for an image manipulation library so that i can manipulate the image directly but couldn't find
Use a container for the image
Container(
decoration: new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.green.withOpacity(0.2)),
image: new NetworkImage(
'Imgurl',
),
),
),
),
I got an image that is landscape and want to use it on my phone (portrait).
I don't want to resize my image. I just want to use what I need based on my screen size and start from the middle of it. And if I want to start from the left, what would be the solution?
I am not sure I am clear, so I created a basic image to explain what I meant.
Thanks
UPDATE
Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
const AssetImage("assets/images/login_960x540.png"),
fit: BoxFit.cover,
// colorFilter: ColorFilter.mode(
// Colors.black.withOpacity(0.3), BlendMode.dstATop),
),
),
),
#David You can use FittedBox and Alignment for positioning background image, for example:
Container(
height: 100,
width: 100,
child: FittedBox(
alignment: Alignment.centerLeft, //Positioned in start
fit: BoxFit.fitHeight,
child: Image.asset('assets/image.png'), //If image 100x300, you will see just 100x100
),
);
I am trying to add a frosted glass effect over an image and based on my research, the below seems to be one way to go about it. However, while there is no linting, it is giving me runtime error: "cannot provide both a color and a decoration". Is there a better way to blur the image in the background with an orange frosted effect?
return Consumer<UserModel>(
builder: (context, model, _) => Scaffold(
body: Container(
color: Colors.orange.withOpacity(0.75),
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage("assets/images/pngguru.com-id-bnwsh.png"),
fit: BoxFit.cover,
),
),
Thats mean, if you have a BoxDecoration property in your container, you need to move color to inside BoxDecoration
Like that
Container(
decoration: BoxDecoration(
color: Colors.orange.withOpacity(0.75), // <-------------
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage("assets/images/pngguru.com-id-bnwsh.png"),
fit: BoxFit.cover,
),
)