I have a grid of images and I want an delete icon on the top-right position of each image.
I used this code to achieve it:
return Stack(
alignment: Alignment.topRight,
fit: StackFit.expand,
children: <Widget>[
Image(
image: image,
fit: BoxFit.cover,
),
Icon(Icons.delete, color: Colors.white,),
],
);
What I got:
The problem is, as you can see, the delete icon is on the center of the image not the up-right even though I set Stack's alignment to Alignment.topRight. I know this happens because I set Stack's fit to StackFit.expand but if I remove it then Image's fit property will be ignored and I'll get this:
So what should I do if I want to keep my Images square and be able to move the Icon to borders?
You should set the alignment only for the icon, so wrap the icon in an Align widget and set its alignment.
return Stack(
fit: StackFit.expand,
children: <Widget>[
Image(
image: image,
fit: BoxFit.cover,
),
Align(
alignment: Alignment.topRight,
child: Icon(
Icons.delete,
color: Colors.white,
),
),
],
);
Related
I have a Flutter project with a PageView with different Images, that fill the entire screen with the BoxFit.cover property. What I want to achieve is an automatically initial animation, that begins with setting the Image Widget property alignment to Alignment.centerLeft and then animates the image to Alignment.centerRight, e.g. the images moves from left to right, and then, as soon as the image reaches the Alignment.centerLeft final position, it automatically switches to the next PageView.
I tried wrapping the Image Widget with the AnimatedAlign, but then the Boxfit.cover does not work anymore.
I want an animation like this:
PageView(
children: [
Container(
child: Image(
// Here I want the animation to go from
// Alignment.centerLeft to Alignment.centerRight
// and then automatically switch to the next PageView
alignment: Alignment.centerLeft
fit: BoxFit.cover,
image: AssetImage("assets/image1.jpg"),
),
),
Container(
child: Image(
fit: BoxFit.cover,
image: AssetImage("assets/image2.jpg"),
),
),
Container(
child: Image(
fit: BoxFit.cover,
image: AssetImage("assets/image3.jpg"),
),
),
],
),
My expected ui is to have the image occupy full width and have an text on top of it. So I an stack widget but it shrinks down and does not take complete width.
body: ListView(
children: [
Stack(
children: [
Container(
child: Image(
height:120.0,
image: AssetImage('images/business.jpg'),
),
),
Text("Business",style: TextStyle(fontSize: 30.0),)
],
)
])
First of all, I think there is no need for the ListView widget as far I know from looking at your code. Remove it and to achieve what you're looking for, add the below properties to the Image widget
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity
so the final version should look like:
Image(
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity
image: AssetImage('images/business.jpg'),
),
I have 4 icons in column, i do not want to show 2 middle icons in some condition but their space still remained.
I want remove those space:
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
iconsModel[0].selected // decide to show icon or not
? Container(
child:Image.asset(
iconsModel[0].iconAdress,
fit: BoxFit.cover,
color: widget.currentColorRow.withOpacity(0.5),
),
)
: Container(),
iconsModel[1].selected // decide to show icon or not
? Container(
child:Image.asset(
iconsModel[1].iconAdress,
fit: BoxFit.cover,
color: widget.currentColorRow.withOpacity(0.5),
),
)
: Container(),
iconsModel[2].selected // decide to show icon or not
? Container(
child:Image.asset(
iconsModel[2].iconAdress,
fit: BoxFit.cover,
color: widget.currentColorRow.withOpacity(0.5),
),
)
: Container(),
iconsModel[3].selected // decide to show icon or not
? Container(
child:Image.asset(
iconsModel[3].iconAdress,
fit: BoxFit.cover,
color: widget.currentColorRow.withOpacity(0.5),
),
)
: Container(),
How can i remove these space when middle icons are not shown?
Simplest solution is to use MainAxisAlignment.start on Column But if you want the spaceBetween then use List of Widget and add/remove items from it based on iconsModel[any].selected.
So, I have to display an image in a container and some description at the bottom of the container. The image is supposed to fill the entire screen. The image is being fetched from the network.
This is my intial approach
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: ClipRRect(
child: Image.network(category.imageURL,
height: maxHeight * 1, fit: BoxFit.cover),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
),
where getNameAndDeleteSection is basically this
return Container(
color: Colors.yellow,
margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
category.name,
maxLines: 1,
style: TextStyle(color: Colors.white),
),
Spacer(),
IconButton(
icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
onPressed: () {
deleteTap(category);
},
)
],
),
);
}
When the network image is loaded, it hides the yellow container , but keeps the children. What I want is the image to remain at the background and the yellow container to remain above it. The idea is that the yellow container will have a transparent color of sorts , to make it look floating on the image.
The max height is the height provided by the listView. I'm trying to make the UI adaptive. Any help?
Why not puting your image as a BoxDecoration in your container like this:
Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(url), fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: getNameAndDeleteSection(context),
)
],
),
Instead of using a Container that always seems to get hidden by the Network Image, I decided to use Card that will envelop the container. And it worked.
So, the change was done in the getNameAndDeleteSection and basically wrapped the entire code in a Card. And bingo, it worked.
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
),
);