so i have a container that displays an image, and the image fitted to the container with fit:BoxFit.cover, here is the code:
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
"assets/images/MojitoImage.png"),
),
),
),
the result of the code will looks like this
i just want to change the position of the image down a little bit to the bottom, so it can be looks like this (there is a little black space above the leaf)
any solution how to do that?
Try alignment: Alignment.topCenter
You can simply position the image with Stack and Position widget like this:
Container(
color: Colors.grey,
width: 80,
height: 80,
child: Stack(
alignment: AlignmentDirectional.center,
children: <Widget>[
Positioned(
bottom: 10.0,
right: 10,
left: 10,
child: Icon(Icons.receipt,
size: 50.0, color: Colors.greenAccent[400]), //Icon
),
],
),
),
Related
HOW TO CREATE THIS?
Its like a ListTile or something with this curve effect in start of it, as of now it won't animate just the next option will be selected onTap but I'm unable to create this effect. I tried it with radius but that's not resulting out to be exact match of this. The code is below.
MY TRY SO FAR
Code
Container(
color: AppTheme.c.primary,
width: 200,
height: 60,
child: Row(
children: [
Container(
width: 50,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.horizontal(
right: Radius.elliptical(
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height,
),
),
),
),
],
),
),
I have a Container with a Row inside.
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
//mbx
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/MBX.png')))),
SizedBox(
width: 5,
),
//motocross
Container(
width: 40.0,
height: 40.0,
decoration: new BoxDecoration(
color: AppColors.grisMovMap,
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/sports/motocross.png')))),
],
),
)
The Row contains two other Containers with a circular asset image inside.
The issue is that both image are not filling the circle space, they are cut on some parts of the border.
I would like to put both images completely inside the circles, just as adding a padding value.
EDIT:
Here you have both full images to compare with the app output:
CircleAvatar(
radius: 100,
child: Padding(
padding: EdgeInsets.all(10),
child: Image.asset(
"assets/images/w3lk3.png",
),
),
backgroundColor: Colors.purple,
),
Output:
Use fit:BoxFit.contain to fit the image fully inside the container.
Since you are using circle image I would suggest using the native flutter solution for circle images as found here in the official documentation. https://api.flutter.dev/flutter/material/CircleAvatar-class.html
In terms of code:
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
If I understood correctly you want a certain color around the circle?
Use double CircleAvatar widget. It may not be the correct way but it accomplishes the task.
CircleAvatar(
radius: 70,
backgroundColor: Colors.red,
child: CircleAvatar(
backgroundImage:
AssetImage('assets/sports/motocross.png'),
radius: 50,
),
),
Since it creates two circles just make sure the first one is bigger than the second one and set the color of your choice.
Align inside a stack gives me a result that I do not understand.
Here is the code:
Container(
height: totalHeight,
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
width: avatarSize,
height: avatarSize,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
)
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 35,
height: 20,
color: Colors.yellow,
),
)
],
),
);
The yellow container is always appearing at the bottom left, no matter what I do.
I want to have it in the bottom center.
avatarSize is greater than 35 of course. I put an outer container to let the stack expand to that outer parent. Seems all natural, but not working. Weird.
What do I miss here?
The best widget to align something inside a Stack is the Positioned widget. I think it can solve your problem
Positioned Widget
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
I am trying to place an image in the center of a box (container with border). The image size is set by surrounding it with a sized box, the the border or box is being created by surrounding that with a container with box decoration like this:
InkWell(
child: Container(
decoration: BoxDecoration(border: Border.all()),
height: 50,
width: 70,
child: SizedBox(
height: 10,
width: 10,
child: Image.asset('assets/store_physical.png',
fit: BoxFit.cover)),
),
),
The problem is that the image asset it ignoring the dimensions of the sized box and taking the size from the surrounding container making the image too big.
I am not sure why this is happening unless it gets it size from the top of the widget tree which doesn't seem to make sense.
Remove width and height from Container and SizedBox, instead provide it in Image.asset()
Container(
decoration: BoxDecoration(border: Border.all(color: Colors.blue, width: 5)),
child: Image.asset(
'assets/store_physical.png',
fit: BoxFit.cover,
height: 50, // set your height
width: 70, // and width here
),
)
I also had the same problem. You can try adding the Image.asset inside another container and then change the size of that container accordingly.
InkWell(
child: Container(
decoration: BoxDecoration(border: Border.all()),
height: 50,
width: 70,
child: SizedBox(
height: 10,
width: 10,
child: Container(
height: 40.0,
width: 40.0,
child: Image.asset(
'assets/store_physical.png',
fit: BoxFit.cover
)
)
),
),
)
When the child container is smaller than the parent, the parent doesn't know where to place it, so it forces it to have the same size. If you include the parameter alignment in the parent container, it will respect the size of the child Container:
InkWell(
child: Container(
alignment: Alignment.topLeft, //Set it to your specific need
decoration: BoxDecoration(border: Border.all()),
height: 50,
width: 70,
child: SizedBox(
height: 10,
width: 10,
child: Image.asset('assets/store_physical.png',
fit: BoxFit.cover)),
),
),