i have a row that includes a column widget.now as its second child i want to have a container to fill the remaining space.here is my code:
Row(
children: [
_status(),
Constants.smallHorizontalSpacer,
Padding(
padding: const EdgeInsets.only(
top: Constants.smallSize,
bottom: Constants.smallSize,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_roundedAvatar(),
_projectType(),
_name(),
],
),
),
_divider(),
Padding(
padding: const EdgeInsets.only(
top: Constants.smallSize,
bottom: Constants.smallSize,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
_usageTypes(),
Constants.smallVerticalSpacer,
_details(),
],
),
Expanded(
child: Container(
height: 60,
color: Colors.black,
child: const Text('fill the remaining space'),
),
),
],
),
Constants.smallVerticalSpacer,
_description(),
],
),
),
// _map(context),
],
),
i have already tried expanded and flexble but all my widgets disappeared.any idea will be greate.
this is my result:
https://i.stack.imgur.com/gFTwX.png
You can wrap your Container with Expanded widget.
Row(
children: [
///.....widgets
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [Text("A")],
),
Expanded(
child: Container(
width: 60,
height: 60,
color: Colors.black,
child: const Text('fill the remaining space'),
),
Wrap the container with a flexible widget and give the container a width of the hoal screen:
Flexible(
child: Container(
width: MediaQuery.of(context).size.width,
),
),
I know it does the same thing like a expanded widget but the expanded widget make's on a real device problems
Related
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: [],
)
],
),
),
),
],
),
),
I have a container with width MediaQuery.of(context).size.width / 1.75.When I minimize screen size text inside the container is overflowing.
This is the output I got now:
class ProfileTopPortion extends StatelessWidget {
const ProfileTopPortion({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
),
SizedBox(
height: 10,
),
Text("Test12346#gma.com"),
],
)
],
),
SizedBox(
height: 25,
),
],
),
],
),
),
),
],
),
);
}
}
I tried flexible and expanded widgets but nothing works.
You need to use Expanded in two widget, try this:
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Expanded(//<---- add this
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Expanded(//<---- add this
child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
overflow: TextOverflow.ellipsis,//<---- add this
),
SizedBox(
height: 10,
),
Text(
"Test12346#gma.com",
overflow: TextOverflow.ellipsis,//<---- add this
),
],
),
)
],
),
SizedBox(
height: 25,
),
],
),
),
],
),
),
),
wrap this column to expanded and also wrap the inner texts into flexible
Expanded( child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(child:Text(
'testEmail1235#gmail.com',
)),
SizedBox(
height: 10,
),
Flexible(child:Text("Test12346#gma.com")),
],
),)
Wrap your text with FittedBox
FittedBox(
child: Text(
"your text",
),
),
Instead of using height and width for container you can use the constraints property i.e
constraints:Boxconstrains(
maxWidth:double.infinity,
maxHeight:double.infinity,
),
It will resize the container height and width according to the text inside.
You can use padding for further decoration
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"),
],
),
),
),
],
),
),
),
),
);
}
The length of the texts on right is not fixed. I want to make the height of the line on left same as the texts area height.
Is there a way to align a widget to another widget like Android's RelativeLayout or ConstraintLayout in Flutter?
my code:
Container(
padding: EdgeInsets.fromLTRB(100, 0, 100, 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Color(0xFFEEEEEE),
width: 4,
height: 80,
margin: EdgeInsets.only(right: 10),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_content,
style: Theme.of(context).textTheme.headline4,
),
],
),
)
],
),
);
Wrap your row into IntrinsicHeight and get rid of the height property
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
color: Color(0xFFEEEEEE),
width: 4,
margin: EdgeInsets.only(right: 10),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'a loong loong text with a lot of letters and characters',
style: Theme.of(context).textTheme.headline4,
),
],
),
)
],
),
),
how can i move a container to right.
I have 3 icon and i need move last icon to right so 2 other icons was at left
I writing app for flutter
example a post from my app
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeLikedBy.count.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node.edgeMediaToComment.count.toString()),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
Simply use a - Spacer() widget to fill up space in between.
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text('10'),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
],
),
),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value].node
.edgeMediaToComment.count
.toString()),
Spacer(), // Add this
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can follow the answer above or add the IconComment and it is value on the same row and set the mainaxis alignement to MainAxisAlignment.spaceBetween
try the code below
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(
children: <Widget>[
Icon(Icons.insert_emoticon),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeLikedBy.count
.toString()),
Icon(Icons.comment),
Text(memes.graphql.hashtag.edgeHashtagToMedia.edges[value]
.node.edgeMediaToComment.count
.toString()),
],
),
),
Container(
margin: EdgeInsets.only(left: 230),
child: Icon(Icons.thumb_up),
)
],
),
you can modify that margin right to make it fit perfectly