Related
I am trying to make a screen like this:
For this I'm using ListView with custom item.
Here is my code of item:
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 65,
height: 65,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
"assets/images/temp.png",
alignment: Alignment.center,
)),
),
const SizedBox(width: 18),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Test title",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.red,
fontSize: 17,
fontWeight: FontWeight.w500),
),
Text(
"TestDescription",
style: TextStyle(
color: Colors.deepOrangeAccent,
fontSize: 15,
fontWeight: FontWeight.w700),
),
],
),
Spacer(),
CustomButton(
onPressed: () {},
)
],
),
),
],
),
],
),
),
));
}
I need align title and description to top, and custom bottom at the bottom. For this I'm using Spacer() inside Column and I wrapped my Column with Expanded widget. But when I wrap my widget with Expanded I get error like this:
RenderFlex children have non-zero flex but incoming height constraints
are unbounded.
When a column is in a parent that does not provide a finite height
constraint, for example if it is in a vertical scrollable, it will try
to shrink-wrap its children along the vertical axis. Setting a flex on
a child (e.g. using Expanded) indicates that the child is to expand to
fill the remaining space in the vertical direction. These two
directives are mutually exclusive. If a parent is to shrink-wrap its
child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using
FlexFit.loose fits for the flexible children (using Flexible rather
than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would
otherwise be forced to take, and then will cause the RenderFlex to
shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
When I remove Expanded() and Spacer() the error no. But I get wrong view. See at the picture:
Please, help me what I'm doing wrong(
You can use IntrinsicHeight as parent of Row to get the desire result with crossAxisAlignment: CrossAxisAlignment.stretch,, then for Rows's children can wrap with Flexible or Exapnded widget.
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: Card(
elevation: 5,
color: Colors.greenAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
// or exapnded
// fit: FlexFit.tight,
flex: 1,
child: Container(
height: 65,
width: 64,
color: Colors.amber,
child: Text("Image"),
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("Item 1"),
Text("Item 2"),
],
),
Text("Item b x"),
],
),
),
Flexible(
flex: 1,
// fit: FlexFit.tight,
child: Container(
color: Colors.cyanAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text("lT"),
Text("lBsssssssssssss"),
],
),
),
),
],
),
),
),
),
);
}
I want to add space between my header and text field, as currently, they are far too close. I have tried adding padding to the row which has the text field, however, there is no movement. Any thoughts on how I could do so?
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Image.asset(
"assets/Login_Photo.jpg",
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Login',
style: TextStyle(
fontSize: 35,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Row(
padding: const EdgeInsets.all(50.0),
children: <Widget>[
Expanded(
child: TextField(
decoration:
InputDecoration(hintText: "Email Address"))),
I have edited your code, So you can wrap Row in the Container and set margin like as top, bottom ,left, right according to your UI, Please tell me if my code is useful or not.
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Image.asset(
"assets/Login_Photo.jpg",
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Login',
style: TextStyle(
fontSize: 35,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Container(
margin:
EdgeInsets.only(top: 10, left: 0, right: 0, bottom: 0),
child: Row(
// padding: const EdgeInsets.all(50.0),
children: <Widget>[
Expanded(
child: TextField(
decoration:
InputDecoration(hintText: "Email Address"),
),
),
],
),
),
],
),
)
],
),
);
}
Use SizedBox widget, with the height property, you assign the distance you want to separate. For Exmaple:
SizedBox(height: 10)//change this value for which you need.
Full code, look like this:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Image.asset(
"assets/Login_Photo.jpg",
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Login',
style: TextStyle(
fontSize: 35,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Sizedbox(height: 10),
Row(
padding: const EdgeInsets.all(50.0),
children: <Widget>[
Expanded(
child: TextField(
decoration:
InputDecoration(hintText: "Email Address"))),
How strange that it doesn't work for you, maybe one of these alternatives works for you:
Container and give some height:
Column(
children: <Widget>[
Widget1(),
Container(height: 10), // set height
Widget2(),
],
)
Spacer
Column(
children: <Widget>[
Widget1(),
Spacer(), // use Spacer
Widget2(),
],
)
Expanded
Column(
children: <Widget>[
Widget1(),
Expanded(child: SizedBox()), // use Expanded
Widget2(),
],
)
mainAxisAlignment
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
children: <Widget>[
Widget1(),
Widget2(),
],
)
Wrap
Wrap(
direction: Axis.vertical, // make sure to set this
spacing: 20, // set your spacing
children: <Widget>[
Widget1(),
Widget2(),
],
)
Space between Column's children in Flutter
I'm having trouble positioning the following on a page:
Image at top
Image + Text touching bottom in that order
Here is the code but I just can't pull it all together:
Widget body = Container(
margin: EdgeInsets.only(top: 30),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
logo,
Container(child: Expanded(child: rotator)),
Container(
width: double.maxFinite,
height: 25,
child: Text("here",
style: TextStyle(
backgroundColor: Colors.teal, fontSize: 20)),
)
]),
));
Image depicting what I'm trying to achieve:
Your question is not specific to me, but maybe this is what you are trying to achieve? Flexible might help solve your problem and this can help you with the responsiveness of your app too
Container(
margin: EdgeInsets.only(top: 30.0),
child: Column(
children: [
Flexible(flex: 2, child: Container(color: Colors.red, width: double.infinity),),
Spacer(),
Flexible(flex: 3, child: Container(color: Colors.green, width: double.infinity)),
Flexible(flex: 1, child: Container(color: Colors.blue, width: double.infinity))
]
)
)
You can try:
Widget body = Container(
margin: EdgeInsets.only(top: 30),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image1,
Column(
children: <Widget>[
Image2,
TextField(),
],
),
]),
));
Try this,
final body = Container(
margin: EdgeInsets.only(top: 30),
// No need to use the `Center` widget
child: Column(
children: <Widget>[
logo,
Spacer(), // Add this line
rotator, // Use only the required image
SizedBox(
// If you are specifying only the size, `SizedBox` is better.
width: double.maxFinite,
height: 25,
child: Text(
"here",
style: TextStyle(backgroundColor: Colors.teal, fontSize: 20),
),
)
],
),
);
I am new to Flutter and having problems in wrap text in the listing screen.
My current code is as follow:
Container(
width: double.infinity,
padding: EdgeInsets.all(Dimen.padding),
color: AppTheme.buildLightTheme().backgroundColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child:
Image.asset('assets/images/bike1.jpg',
height: 80, width: 80, fit: BoxFit.cover)
),
SizedBox(
width: 16,
),
Column(
verticalDirection: VerticalDirection.down,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Text(
modelData.titleTxt,
style: (TextStyles.bldTextview),
overflow: TextOverflow.ellipsis,
)),
SizedBox(
width: 6,
),
Flexible(
child: Text(modelData.subTxt,
overflow: TextOverflow.ellipsis,
style: (TextStyles.regularTextview)))
],
)
],
),
)
The output of this code is:
What I want to achieve is like this:
How to do it?
Just add Expanded widget in the column of title and subtitle.
Container(
width: double.infinity,
padding: EdgeInsets.all(Dimen.padding),
color: AppTheme.buildLightTheme().backgroundColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset('assets/images/bike1.jpg',
height: 80, width: 80, fit: BoxFit.cover),
),
SizedBox(
width: 16,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
modelData.titleTxt,
maxLines: 2,
style: (TextStyles.bldTextview),
overflow: TextOverflow.ellipsis,
),
SizedBox(
width: 6,
),
Text(modelData.subTxt,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: (TextStyles.regularTextview)),
],
),
)
],
),
)
In your expected output screenshot, each card has different value for maxLines based on the number of lines used by the title. But there is no attribute available in the current Text widget implementation of Flutter.
Well, you can workaround this by checking the available space using a LayoutBuilder, and based on available height, set the maxLines value.
See the below example.
Container(
padding: new EdgeInsets.all(15.0),
width: 150.0,
height: 110.0,
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'I take up as much space as possible.',
style: const TextStyle(fontWeight: FontWeight.bold),
),
Expanded(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
print(constraints);
return Text(
'The space I have is very limited. I get ellipsed.',
overflow: TextOverflow.ellipsis,
maxLines: (constraints.maxHeight / Theme.of(context).textTheme.body1.fontSize).floor(),
);
}),
),
],
),
),
I'm trying to make a widget like this:
But the problem I've faced with is that if title is too long it pushes the icon (triangle) out of the bounds of card.
What I want to have is the icon should always be at top right corner of the card and title to take all the available space between image and triangle, but not more. If title is too long it should just take new line.
But it should be like this:
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
child: Container(
height: 130,
child: Row(
children: <Widget>[
Image(
image: NetworkImage(product.primaryImage.url),
height: 130,
width: 60,
),
SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Text(
product.name,
maxLines: 2,
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
IconButton(
padding: EdgeInsets.zero,
iconSize: 24,
icon: Icon(Icons.remove_circle_outline),
onPressed: () => onRemove(product),
)
],
),
SizedBox(height: 8),
Text("$quantityInCart x \$$price"),
],
),
],
),
),
);
}
Wrapping title in Expanded doesn't work because parent Row gives it infinite width constraint.
You need to use two Expanded like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 300,
width: 100,
color: Colors.blue,
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text('This is quite a loooooo ooooooooo ooooooo ooooong title',
softWrap: true,
maxLines: 2,
),
),
Icon(Icons.add_alert)
],
),
Text('This is a normal description')
],
),
)
],
)