Now I am using row to horizon some component in flutter, this is my code:
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0),
child: Text(
item.subName,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
child: ButtonTheme(
minWidth: 50,
height: 30.0,
child:RaisedButton(
color: Theme.of(context).primaryColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
onPressed: () async {
print("pressed");
},
child: Text("Subscribe"),
)
),
)
],
)
now I want the button subscribe align right, what should I do to make it work? I am tried like this but failed:
padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
I am tried to make the button with one pixel of the screen, but it seems not working.
If you want something like this:
You can set the mainAxisAlignment property of Row to spaceBetween
What you are trying to add is padding which only surrounds the widget, it will not align the widget to right. it will add padding to the right side of the Widget.
In Row() widget make mainAxisAlignment: MainAxisAlignment.spaceBetween. This will align the Subscribe button to right.
If you want space between the widgets of the row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
To Align the widgets completely on the right.
Row(
mainAxisAlignment: MainAxisAlignment.end,
),
To make the widgets take up the space evenly in the row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
Related
I'm building a message tile for chat screen in the flutter. I'm making the use of spaceBetween property of mainAxisAlignment in row to keep both text widget apart from each other but it's not making any impact
here is my code
Row(
mainAxisAlignment: messageModel.sender == FirebaseAuth.instance.currentUser!.uid.trim() ? MainAxisAlignment.start : MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.only(bottom: 15.0),
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
decoration: BoxDecoration(
color: const Colors.greenAccent,
borderRadius: BorderRadius.circular(15.0)
),
child: Column( // Used expanded property on this, but that didn't work too
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(messageModel.message.toString(), style: GoogleFonts.oswald(color: Colors.white)),
const SizedBox(height: 2.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // not working
children: [
Text(DateFormat.jm().format(messageModel.createdOn!).toString(), style: GoogleFonts.oswald(color: Colors.white, fontSize: 12.0,)),
// also tried to make the use of spacer widget, but that didn't work too
const Icon(CustomIcons.check, color: Colors.white, size: 12.0)
],
)
],
),
)
],
);
I'm trying to keep time and tick icon apart from each other
the problem here is that the row is occupying the least amount of width possible for what it stores inside it, and that is that there is no separation since there is no space available inside the row for said separation, you could do the following to solve this . At least it works for me to handle it that way.
you need to wrap the row in a container to which you assign a min value of width and a max value if you want to anyway. I only left it with minimum value
Container(
constraints: const BoxConstraints(minWidth: 120),
child: Row(
mainAxisAlignment: MainAxisAlignment
.spaceBetween, // not working
mainAxisSize: MainAxisSize.max,
children: [
Text('fecha X',
style: GoogleFonts.oswald(
color: Colors.white,
fontSize: 12.0,
)), // also tried to make the use of spacer widget, but that didn't work too
const Icon(Icons.check,
color: Colors.white, size: 12.0)
],
),
)
I have this card with a flexible Row that is setting the width size of the card and beneath it I have a text field that should only be as large as the Row above, but as the text is bigger, it streches the Card.
How can I fix the width of the Text to be the same as the flexible Row without jumping line with \n?
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 24.0, right: 12),
child: Image.asset('assets/card_recommendation.png'),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Text(
'Elimine',
style: TextStyles.paragraphSmall12DarkerGreyMedium,
),
),
],
)
]
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 24),
child: Text(
'Zerando a anuidade do seu cartão de crédito',
style: TextStyles.paragraphSmall12DarkerGreyMedium,
),
)
],
),
),
Try use FittedBox
If the text is too large, FittedBox will automatically decrease the font size so that it fits inside the Card's space.
I'm trying to make comment card.
There is one problem.
My avatar and button are not fixed when comment height is growing
I want avatar image and button's position fixed.
How can I make this ?
import 'package:flutter/material.dart';
import '../../size_config.dart';
class CommentItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 25,
child: ClipOval(
child: SizedBox(
height: 1000,
width: 1000,
child: Image.asset(
'assets/images/img2.jpg',
fit: BoxFit.cover,
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('123',
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 17)),
SizedBox(height: 3),
Text(
'. If you want to keep these changes, it is re',
style: TextStyle(color: Colors.grey),
maxLines: 4,
),
],
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(
width: SizeConfig.widthMultiplier * 8.8,
height: SizeConfig.heightMultiplier * 5,
child: Icon(
Icons.person_add,
size: SizeConfig.imageSizeMultiplier * 5.5,
color: Colors.white,
)),
onTap: () {},
),
),
)
],
),
);
}
}
it looks like your post is mostly code; please add some more details
it looks like your post is mostly code; please add some more details
it looks like your post is mostly code; please add some more details
To achieve this you can make use of Row's crossAxisAlignment property it will arrange the widget inside the row respectively
For Center -
crossAxisAlignment: CrossAxisAlignment.center
For Top -
crossAxisAlignment: CrossAxisAlignment.start,
For Bottom -
crossAxisAlignment: CrossAxisAlignment.end,
Did you try using the crossAxisAlignment?
Row(
crossAxisAlignment: CrossAxisAlignment.start,
You can do it using...
crossAxisAlignment: CrossAxisAlignment.start
For this, you can use the Alignment Property of Row
There is two alignment property in Row:
MainAxisAlignment
CrossAxisAlignment
MainAxisAlignment is used for Horizontal Alignment of Widgets and CrossAxisAlignment is used for Vertical Alignment.
In your case you need to set:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
I have 2 questions related :
I have nested function BuildButtonColumn which takes an icon
and text below it and I want to make it tappable. I know
GestureDetector has onTap property, but how do I use that in the
function BuildButtonColumn ?
Column buildButtonColumn(IconData icon, String label) {
Color color = Theme
.of(context)
.primaryColor;
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
),
Icon(icon, color: color),
Container(
margin: const EdgeInsets.only(top: 8.0),
child: Text(
label,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
color: Colors.black,
)
),
)
],
);
}
Widget buttonSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.message, 'Message'),
buildButtonColumn(Icons.videocam, 'Request Video')
],
),
);
I took button layout reference from here.
And this is the UI wherein I need to open specific screen on each icon or text tap.
I also want to show a vertical divider between them. I followed
this SO post, but it didn't work out for me or I might have
missed something there to implement it.
Instead return Column you can write:
return GestureDetector(
onTap: (){ ... },
child: Column(),
)
Regarding divider - VerticalDivider() is totally fine for me
Widget buttonSection = Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildButtonColumn(Icons.message, 'Message'),
VerticalDivider(color: Colors.black,),
buildButtonColumn(Icons.videocam, 'Request Video')
],
),
);
It has to work
Below is the source code of the function, which allows show the menu by clicking on the canvas. In this case, the menu is the modeless window.
void _showModeless(BuildContext context) {
_modeless = new OverlayEntry(
opaque: false,
builder: (context) {
return new Positioned(
top: 100.0,
left: 100.0,
child: new Column(
children: [
selectItem("properties"),
selectItem("delete"),
selectItem("zoom"),
]
),
);
});
Overlay.of(context).insert(_modeless);
_startWaiting();
}
GestureDetector selectItem(String text) {
return new GestureDetector(
onTap: () {
setState(() {
//_lights = true;
_closeModelessWindow();
print('=== tap ===');
});
},
child: new Container(
child: item(text),
decoration: new BoxDecoration (
color: Colors.blue, borderRadius: new BorderRadius.only(
topLeft: Radius.circular(16.0),
bottomRight: Radius.circular(16.0),
),
),
padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 8.0, right: 8.0)
),
);
}
Row item(String text)
{
return new Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Icon(Icons.content_paste, color: Colors.white),
new Padding(
padding: const EdgeInsets.only(left: 16.0, right: 24.0, ),
child: new Text(text, overflow: TextOverflow.ellipsis,
style: new TextStyle(fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.white,
decoration: TextDecoration.none
),
),
),
],
);
}
I do not like that the items are located in the center of this window. How to move them to the left up to some vertical reference line?
You can left-align the children of the Column using crossAxisAlignment: CrossAxisAlignment.start, in the Column constructor.
Please see below approach to align left/right in column/row.
Column
// for Left align
new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('Building Name'),
new Text(propertyModel.title),
],
),
);
// for Right align
just change CrossAxisAlignment.start to CrossAxisAlignment.end in above code
Row
// for Left align
new Container(
width: double.infinity,
child: new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text('Building Name'),
],
),
);
// for Right align
just change MainAxisAlignment.start to MainAxisAlignment.end in above code
For more reference Please refer Column and Row
Add the crossAxisAlignment property to your Column
crossAxisAlignment: CrossAxisAlignment.start