I'm trying to make an application on Flutter. I ran into a problem: I can't make the images stretch in width.
I need 2 columns, each has an image, each column should be 50% of the width of the screen, and stretch image with column. Everything works as shown in the picture, until I insert it into SingleChildScrollView. After that, the application crashes until I set the exact height of the image.
Question: how to do this WITHOUT specifying the height of the image? I can't set height anywhere inside Row, because I don't know exact size а the image.
try this:
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Row(
children: [
Expanded(
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.contain,
)),
Expanded(
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.contain,
))
],
),
),
Try flexible instead of expanded
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Row(
children: [
Flexible(
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.contain,
)),
Flexible(
child: Image.asset(
'assets/images/test.jpeg',
fit: BoxFit.contain,
))
],
),
),
Related
I want to develop a UI just like Postman Desktop App. But When I add a text field and fix the sized button in a row it gives an error RenderFlex children have non-zero flex but incoming width constraints are unbounded. But I don’t want to give a fixed size to the text field through MediaQuery. As you can see in this video (Demo UI) Postman text field size is fixed when the screen size decrease it shows a horizontal scrollbar. I want the same behavior. Here is the code.
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: MediaQuery.of(context).size.height,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: 300,
decoration:
BoxDecoration(border: Border.all(color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: Image.network(
ImageURL,
fit: BoxFit.fitWidth,
),
),
],
),
),
),
SizedBox(
child: Column(
children: [
Row(
children: <Widget>[
const Expanded(child: TextField()),
DarkButton("Save", () {}),
],
),
],
),
),
],
),
),
),
);
Add isDens = true in Textfield.
Just like this:
Expanded(child: TextField(decoration: InputDecoration(isDense: true),)),
this is because you use Expanded inside the SingleChildScrollView.
You can not use Expanded inside the SingleChildScrollView because it covers the maximum width or height.
Just remove SingleChildScrollView error was gone.
you may use listview for this or use CustomScrollView for that
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'),
),
Row mainAxisAlignment is not working after wrapping with FittedBox
Please explain me why this is happening.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
height: 20,
child: FittedBox(
fit: BoxFit.fill,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('THis is the thing'),
Text('THis is another thing'),
],
),
),
)
);
}
Expected
Output
If you really want to use Row inside FittedBox with effect of mainAxisAllignment.spaceBetween or any, you have to manually set spaceBetween using SizedBox with width as per spacing. Also set fit property to BoxFit.fitHeight .
Container(
height: 20,
child: FittedBox(
alignment: Alignment.center,
fit: BoxFit.fitHeight,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('THis is the thing',style: TextStyle(fontSize: 20),),
SizedBox(width: 300,),
Text('THis is another thing',style: TextStyle(fontSize: 20,),),
],
),
),
)
Note: Set allignment property to specify positioning. for MainAxisAllignment.start and MainAxisAllignment.start.
Eg: Alignment.topLeft to get MainAxisAllignment.start effect.
To answer your question,
Row mainAxisAlignment is not working after wrapping with FittedBox
Please explain me why this is happening.
Container always fills the entire width of the screen size. If it has child, then it will wraps up itself to match the width of its child.
Another interesting widget FittedBox will fits its children based on the size of the children within itself by scaling based on available space.
Solution
To achieve the expected result, you can force set the width of Container widget to double.infinity
Snippet
body: Container(
height: 20,
width: double.infinity,
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text('THis is the ROW'), Text('THis is another ')],
),
),
)
NOTE : If texts are small it will be enlarged to occupy the rest of the space because it is inside the FittedBox and vice-versa.
I want to achieve this
This is my code
Row(
children: [
Expanded(
flex: 1,
child: Text(
"somethinig here..."),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
),
],
),
),
),
],
),
Result:
You can see how the image is clipped, I just want to clip all sides except the left side.
You can wrap the image widget with an Align widget to easily position the image inside the clipper. The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the `clipper
A Nice Example to use the Align Widget with ClipRect will be
ClipRect(
child: Container(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.6,
heightFactor: 1.0,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
);
To Know More about the Clippers see This Article
Just wrap your Text widget with Center.
And SvgPicture with Align. (I realize this later.)
Row(
children: [
Expanded(
flex: 1,
child: Center(child: Text("somethinig here...")),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
Align(
alignment: Alignment.centerRight,
child: SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
)),
],
),
),
),
],
)
I want to make a widget where i can add a progress bar or shapes inside a image.
As in the attachment,
I wrapped the image and the shape inside the Stack widget but when the screen sizes change the position of the widgets change too
Is there any way to achieve this ?
You can set the image as the decoration image of a Container. Then you can use a FractionallySizedBox for the item that should be placed inside the image, and set this widget as the Container's child. You can also use a Flex and set the text and shape (the items inside the image) as its children.
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.vexels.com/media/users/3/151609/isolated/preview/1e5e087078b86c2491300c61ce46c48c-canning-jar-stroke-icon-by-vexels.png'),
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
heightFactor: 0.6,
widthFactor: 0.6,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Flexible(
flex: 2,
child: Container(
child: Text(
'50%',
style: TextStyle(fontSize: 24),
)),
),
Flexible(
flex: 8,
child: Container(
child: Image.network(
'https://images.vexels.com/media/users/3/129171/isolated/preview/c3746ad76845f55dda5e6a0d1c81d32a-3-stack-coins-icon-by-vexels.png'),
),
),
],
)),
),
),
),
Result:
If you have screens size issue than use
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
you can get height or width of screen and adjust view according to this.