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
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: [],
)
],
),
),
),
],
),
),
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"))),
],
),
),
),
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
I'm trying to personalize what's inside a RaisedButton for my home automation project, in with I add different types of text and icons to the Button. but I'm getting an overflow by 1 pixel for some reason.
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
The app:
The RaisedButton has some default padding. Fix it by removing the default padding.
This would work perfectly, check it out.
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: RaisedButton(
// remove the default padding the raised button has
padding: EdgeInsets.zero,
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
The output looks like this
Screenshot
I didn't figure out why you get this result but you can use InkWell + Container instead of RaisedButton:
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 90.0,
height: 90.0,
child: InkWell(
onTap: () {},
child: Container(
color: Colors.grey,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.stay_primary_portrait),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('Lock'),
),
Padding(
padding: EdgeInsets.only(left: 0),
child: Text('100%'),
),
],
),
],
),
),
),
),
),
I am using Slidable and whenever it is used, the widget below is moved up.
Widget buildItemList(BuildContext context, DocumentSnapshot document) {
return new Container(
child: Card(
elevation: 10.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Slidable(
actionPane: SlidableDrawerActionPane(),
//actionExtentRatio: 0.25,
closeOnScroll: false,
secondaryActions: <Widget>[
IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: (){},
)
],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// Unnecessary code was removed
children: <Widget>[
Container(
padding: const EdgeInsets.only(right: 12.0),
child: Row(
children: <Widget>[
Text('0'),
Text('/'),
Text(document['value'].toString())
],)
)
]
),
),
),
);
}
It does not matter where i put Slidable, it always resizes the widget.
Someone able to help?
Thank you!
This will fix the issue
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: double.maxFinite,
width: double.maxFinite,
padding: const EdgeInsets.only(right: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text('0'),
Text('/'),
Text('value'.toString())
],
)),
)
],
),
If you don't need extra functionality you can remove the two rows and simply write something like
child: Container(
alignment: Alignment.centerRight,
padding: const EdgeInsets.only(right: 12.0),
child: Text('0/${document['value'].toString()}'),
),