I have a ListView with ListTile. Each ListTile has a title with Text, subtitle with Text, and leading with an Image.
Now, the Image is too big and vertically stretches into the next row, overlapping the Image there.
How can I make sure that the Image stays within the bounds?
EDIT:
I’d like not to give the image a fixed size, but rather let it adjust to the height of the list tile as given by title+subtitle’s intrinsic height.
You should use CircleAvatar as leading in your ListTile. It has a radius property also that you can change, if you wish.
leading: CircleAvatar(
backgroundImage: AssetImage("..."), // No matter how big it is, it won't overflow
),
If you wanna use rectangle image, you can use
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 44,
minHeight: 44,
maxWidth: 64,
maxHeight: 64,
),
child: Image.asset(profileImage, fit: BoxFit.cover),
),
Do this:
leading: SizedBox(
height: 100.0,
width: 100.0, // fixed width and height
child: Image.asset(...)
)
Related
I want to add my logo but logo doesn't seem.
leading: Image.asset(
"assets/icons/belha-logo.jpg",
fit: BoxFit.cover,
height: 40,
width: 40,
),
That is image of my phone
I tried to give width,height and fit property of asset image but dont work
Add your file path on pubspec.yaml
example:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
if you just added a file, u need to kill your app and re launch it
See the fact that you are using the image in the AppBar makes no effect if you increase the height or width of the image.
What you need to do is:-
Either make a custom appbar for your use.
Or design the logo in such a way that when it is shrinked to that size it doesn't affect the quality.
Hope this helps!
Just add toolbarHeight and leadingWidth in AppBar according to your requirements and that will do the trick :)
AppBar(
toolbarHeight: 200,
leadingWidth: 160,
leading: Image.network(
'https://upload.wikimedia.org/wikipedia/commons/9/99/Sample_User_Icon.png',
fit: BoxFit.cover,
height: 140,
width: 140,
),
),
body: Container(),
),
I'm trying to have a button nested in a container with a specific background color. I'm setting the height on the Container and on the MaterialButton nested within. I would expect the MaterialButton to maintain it's height of 40, while in the container of height 100. Instead, the MaterialButton is stretch to the height and width of the container.
Container(
color: lightBackground,
height: 100,
width: double.infinity,
child: MaterialButton(
height: 40,
child: Text('Hi'),
color: primaryColor,
onPressed: () {},
))
Anyone know how to get round this? Thanks.
The simple solution is to set alignment: Alignment.center for the Container, or wrap the Button with a Center widget.
For example:
Container(
height: 100,
alignment: Alignment.center,
child: ...
)
The long explanation has to do with Flutter Layout Constraints. You can read more about it at the official doc here.
I am building a flutter web app, and I want to have a carousel slider widget with images. For this I use the carousel_pro package. I want the size to be the width of my carouselslider, which takes up the whole screen's width, and then set the size accordingly, to be the exact size needed. Is there a way to do this?
Now I am settling for a less option, which looks like this:
Flexible(
child: Container(
color: CustomColours.midBlue,
constraints: BoxConstraints(maxHeight: height / 2),
//height: height / 2,
width: width,
child: Carousel(
dotBgColor: Colors.transparent,
autoplayDuration: Duration(seconds: 5),
boxFit: BoxFit.cover,
images: [
AssetImage(
'lib/assets/create-esports-poster-design-in-48-hours.png'),
//AssetImage('lib/assets/Image from iOS.jpg'),
// AssetImage('lib/assets/banner.png'),
],
),
),
),
And I know I could not add a height for a container for it to work, but since this is in a column, it has to have a height. This solution would be good for me, however now the slider has grey lines on top and below it, like this: Is there a way to 1) do what I originally wanted or 2) fix this issue? Thank you very much!
I want to create a container in flutter which changes its height according to the amount of text present in it.
If there is more text, it should cover more height, if text is less, it should cover less height.
You can use fitted Box and width of container will help you to increase height dramatically.
FittedBox(fit: BoxFit.fill,
child: Container(width: 70,
child:
Text('hello '), color: Colors.red,
)
)
I have a layout where I want to expand a widget (container) to the right, it's the red area in the examples. To the left of the expanded container there is a column with an image at the topleft (blue in examples) and a button in the bottom of the column. I do know the button width, it's a bit over 100 pixels but we can assume that it's 100 pixels if that helps.
The thing is that the blue area (it's a user uploaded image) can vary in size. From e.g. 100x100 to 800x800. It will be square and smaller than 100x100 is not supported. Large images are resized to 800x800.
I want to achieve this:
The column should adapt it's size depending on the image size.
The column should be as wide as needed by the button but otherwise 100 <= width <= 400 depending on image size.
The column should not overflow in any direction.
The red area should be maximized.
The button should always be at the bottom left of the layout.
I cannot know the column height in advance without using a LayoutBuilder and I want to know if this is achievable without calculating the exact height in pixels using a LayoutBuilder.
Here's an example of how I want it too look with a small image (100x100) and that works with the code below the image:
Code that works well for 100x100 image:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Container(
height: 400,
width: 800,
child: Row(
children: <Widget>[
_buildColumn(),
Expanded(child: Container(color: Colors.red)),
],
),
),
),
);
}
Widget _buildColumn() {
return Container(
constraints: BoxConstraints(maxWidth: 400),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildImage(),
MaterialButton(
color: Colors.green,
child: Text('Fixed height button'),
onPressed: () {},
)
],
),
),
);
}
Widget _buildImage() {
// This can vary from 100x100 to 800x800 (always square)
var size = 100.0;
return Container(color: Colors.blue, width: size, height: size);
}
If I bump it to an 800x800 image by changing the size variable to 800.0 in _buildImage() I get this layout:
I understand that the column have unconstrained height on it's children so it will render the blue container with 800px height which creates the overflow. I do know that the column height is 400px in this case and that the button is 48px high so I can calculate that the max image size is 352px in height. By wrapping the blue container in a Container with constraints (maxWidth: 352, maxHeight: 352) I achieve the layout that I want:
Widget _buildImage() {
// This can vary from 100x100 to 800x800 (always square)
var size = 800.0;
return Container(
constraints: BoxConstraints(maxWidth: 352, maxHeight: 352),
child: Container(color: Colors.blue, width: size, height: size),
);
}
I can also achieve this using expanded, like this:
Widget _buildImage() {
// This can vary from 100x100 to 800x800 (always square)
var size = 800.0;
return Expanded(
child: Container(color: Colors.blue, width: size, height: size),
);
}
I want to avoid using calculated pixels for height/width so lets continue with the Expanded widget. When I have that expanded widget with a small image, i.e. 100x100 I get this result (which is not what I want):
I need to align my blue square within the expanded widget to prevent it to getting stretched but when I do that (align top left), like this:
Widget _buildImage() {
// This can vary from 100x100 to 800x800 (always square)
var size = 100.0;
return Expanded(
child: Container(
alignment: Alignment.topLeft,
child: Container(color: Colors.blue, width: size, height: size),
),
);
}
Then I get this result:
The container outside of the blue container expands and makes the column unnecessary wide. I want to have the same look as the first image when I have a small image.
How can I achieve this adaptive layout without using a LayoutBuilder and calculating exact image constraints?
Wrap the column with a container and set the height:
MediaQuery.of(context).size.height * 0.8;
it will contain 80% height in screen