Constraint widget by other widget - flutter

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')
],
),
)
],
)

Related

Flutter expand row inside of a column

I have the following layout:
Row ->
Column
Padding ->
Column ->
Row ->// this one is only taking as much space as it needs
Text
Image
Text
Row
I need the row in the second column to take the whole width of the column it is wrapped in.
No matter how much I look for the answer wrapping different widgets into Flexible and Expanded doesn't help.
here is the code:
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Column(
children: [
CircleAvatar(
radius: 25,
child: Image(
image: getCategoryImage(task.type),
),
)
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(task.title, style: Theme.of(context).textTheme.headlineMedium,),
const Image(
width: 20, image: AssetImage("assets/icons/task/tickbox.png"))
],
),
Text(generateBirdList(task.assignedBirds), style: Theme.of(context).textTheme.titleSmall,),
Row(
children: [
],
)
],
),
),
],
),
),
Container(
color: Colors.amber,
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Container(
color: Colors.blueAccent,
child: CircleAvatar(
radius: 25,
child: Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
),
),
),
Expanded(
child: Container(
color: Colors.green,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"task.title",
style: Theme.of(context).textTheme.headlineMedium,
),
Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
width: 20,
)
],
),
Text(
"Bla bla bla text",
style: Theme.of(context).textTheme.titleSmall,
),
Row(
children: [],
)
],
),
),
),
],
),
),

How to add text at right to screen?

I want to add the report question text on the right side I tried the position widget but it doesn't work what I do?
I try to achieve-
code-
Positioned(
right: 0,
child: Row(
children: [
Icon(Icons.report, color: Color(0xff0E5487),),
TextButton(onPressed: () => {}, child: Text("Report Question",
style: cstmTextStyle(fs: 18, fc:Color(0xff0E5487) ),)),
],
),),
My advice is to use a Column with Spacer widget instead of a Stack.
I made an example of you:
Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.green,
width: 160,
height: 160,
),
const Spacer(),
Container(
color: Colors.green,
width: 160,
height: 160,
)
],
),
const SizedBox(height: 8,),
Row(
mainAxisSize: MainAxisSize.max,
children: const [
Spacer(),
Placeholder(fallbackWidth: 32, fallbackHeight: 32,),
SizedBox(width: 8,),
Text('Report Question')
],
)
],
),
Wrap Your Row With Alignment
Align(alignment: Alignment.topRight,
child: const Row(
),
),

How to align expanded widgets in a row

Why does the 1st two work but not the 3rd?? what's the alternative to add vertical divider with height that stretch to the max height of the row?
These 2 works
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
child: Text('Kicukiro'),
),
Container(width: 1,color: Colors.black,height: double.infinity,),
Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
)
],
)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Text('Kicukiro'),
),
),
// Container(width: 1,color: Colors.black,height: double.infinity,),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
),
)
],
)
this does not work
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Text('Kicukiro'),
),
),
Container(width: 1,color: Colors.black,height: double.infinity,),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text('Kicukiro'),
),
)
],
)
Test this and it will work
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
),
Container(color:Colors.black, width: 1),
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: const Text("Kicukiro", style: TextStyle(fontSize: 52),)),
),
],
),
),
In the last screenshot please add the Container under an Expanded widget. Use children property under Row widget.
Here is an example code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
'This is question',
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
//textColor: Colors.white,
color: Colors.green,
child: Text(
'True',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onPressed: () {},
),
)),
Expanded(
child: Padding(
padding: EdgeInsets.all(10.0),
child: FlatButton(
//textColor: Colors.white,
color: Colors.red,
child: Text(
'False',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
onPressed: () {},
),
)),
]
The third is true, in fact, its existence in an SingleChildScrollView has created a problem
It is fixed by putting SizedBox in Row and giving it height
The reason for this problem is the size of the height of the container, which is determined by double.infinity and due to its presence in an SingleChildScrollView, it continues indefinitely and an error was created.
SingleChildScrollView(
child: SizedBox(
height: 250,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Container(child: Text("Kicukiro"))),
Container(
width: 1,color: Colors.black,height: double.infinity,
),
Expanded(child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Text("Kicukiro"))),
],
),
),
),

Padding not rendering between header and textfield?

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

How to place the text of a Row at its bottom?

Hi so currently i have a card that looks like this:
And i want to change it so the text that says test is at the bottom of the card, like below:
Also if you see i added a arrow on the bottom line as well which is where i would like to add a button.
The code i have currently is below:
#override
Widget build(BuildContext context) {
return Container(
height: 160,
child: GestureDetector(
onTap: tap,
child: Card(
color: Colors.white,
elevation: 2,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(img),
fit: BoxFit.cover,
))),
),
Flexible(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(2, 5, 2, 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, style: TextStyle(fontSize: 17, color: Colors.black)),
SizedBox(height: 10.0),
Center(
child: Text("Header", style: TextStyle(color: fontSize: 35)),
),
SizedBox(height: 5.0),
]),
)),
Center(
child: Text('test'),
),
],
),
),
));
}
How could i do this?
Try the following. Make effort the next time ;)
Card(
// ...
child: Row(
children: [
Flexible(
flex: 2,
// ... your image section
),
Flexible(
flex: 3,
child: Column(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ... your title
// ... your header
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Test"),
MaterialButton(
onPressed: () {},
child: Text("Your Button"),
)
],
),
],
),
),
],
),
),