In my fluttr App, I want to display a text on the left side and a button on the right side of the same row. I gave the proper alignment but still its not coming, can any one let me know where I made the mistake, below is the code
Widget build(BuildContext context) {
return Scaffold(body:SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 80.0,
),
child: Container(
child: Row(children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
]),
))));
}
output of code
how to align filter to left and Reset button to right of the screen?
Thank you
Couple of ways to get it:
1> use mainAxisAlignment: MainAxisAlignment.spaceBetween, in Row()
OR
2> Use Spacer() widget between your widgets.
Code:
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween, // first way
children: <Widget>[
new Container(
alignment: Alignment.topLeft,
child: Align(
child: Text(
'Filters',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
),
),
Spacer(), // second way
Container(
alignment: Alignment.topRight,
child: OutlineButton(
child: Text(
'Reset',
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.black54),
),
onPressed: null,
)),
])
you can do that by providing an axis alignment to the row.
this will place items on both end of the row
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
i suggest reading this article to fully understand how layouts work in flutter [https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041][1]
Row{
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children:<Widget>[
Text('Left Text'),
OutlineButton(
child:Text('Right Button',),
),
]}
This should suffice your requirement I suppose
Related
I am using a Card widget populated with a Row. At the end of the row I use a GFIconButton widget which is the bin and it currently moves depending on the length of the menu item's name. I want the bin to stay at the far right position no matter what the length of the menu item is.
I am already using Alignment.centerRight
Card(
margin: const EdgeInsets.fromLTRB(5, 10, 5, 10), //EdgeInsets.all(10),
color: Colors.white,
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRect(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.8,
child: Image(
image: AssetImage(itemImg),
height: 100,
width: 70,
fit: BoxFit.cover,
),
)),
const SizedBox(width: 30),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold),
),
const SizedBox(height: 5),
Text(
"R$price",
style: const TextStyle(color: Colors.black, fontSize: 17),
),
const SizedBox(height: 5),
Text(
variety,
style: const TextStyle(color: Colors.black, fontSize: 17),
),
],
),
// Container(child: ),
const SizedBox(width: 30),
Text("x" + quantity.toString(),
style: const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.end),
const SizedBox(width: 20),
GFIconButton(
alignment: Alignment.centerRight,
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
]),
),
Here's the simplest solution:
Card(
child: Row(
children: [
Text('image'),
Text("texts cdppdwpwdpwdpolumn"),
Text('quantity'),
Expanded(child: SizedBox()), //this is crucial- this keeps icon always at the end
Icon(Icons.delete)
],
),
),
You can try to put Spacer between your quantity text widget and icon widget to align your icon widget to far right. For further information you need to include your code to your post.
Either add a relative space between icon and the text or, wrap the icon on the right and everything on the left inside another row and use mainAxisAlignment as spaceBetween
Change your last widgets in row to this:
Expanded(
child: Text("x" + quantity.toString(),
style:
const TextStyle(color: Colors.black, fontSize: 20),
textAlign: TextAlign.start),
),
const SizedBox(width: 20),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: GFIconButton(
onPressed: () async {
//If points are above 0 a reward
//Id hard coded
},
icon: const Icon(
Icons.delete_outline,
color: Colors.black,
textDirection: TextDirection.ltr,
),
type: GFButtonType.transparent,
),
),
mainAxisAlignment: MainAxisAlignment.SpaceBetween
and check if icon width and set it around 30
I have a simple view with a Column and two Rows, the second row has a list of circular buttons, which I would like to be aligned with the beginning of the first row.
Unfortunately, probably because of the CircularBorder I can't do it... Any idea how to make it work?
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.only(
bottom: 12.0,
top: 20.0,
),
child: Align(
alignment: Alignment.centerLeft,
child: Text("Select preferred options",
textAlign: TextAlign.left,
style: TextStyle(
color: Color(0XFF8E8E8E),
fontSize: 15.0,
fontWeight: FontWeight.w200,
)),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...TransportModes.publicTransport.options.map(
(e) => Container(
color: Colors.blue,
child: Column(
children: [
Container(
color: Colors.red,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(0),
primary: Theme.of(context).colorScheme.tertiary,
),
onPressed: () {},
child: ImageIcon(
AssetImage(iconPath),
size: 20.0,
color: Theme.of(context).colorScheme.onTertiary,
),
),
),
Text(
text,
style: const TextStyle(
color: Color(0XFF8E8E8E),
fontSize: 13.0,
fontWeight: FontWeight.w200,
),
)
],
),
),
),
],
),
],
),
The result looks like this:
I would like the first circle to start aligned with the text above...
The space around the circle is caused by minimumSize: property in the default style of elevated button.
Add minimumSize: Size(40, 40) or (your preferred height and width) inside style: ElevatedButton.styleFrom().
i would like to have a circle in which i can put centered text using ListTile widget? what i done is below :
ListTile(
leading: new CircleAvatar(
backgroundColor: color2,
child: new Text(
letter,
style: TextStyle(
color: color,
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
)),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style:
TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
),
and the result :
as you can see, the string is not centered vertically and i would like the do that conserving the same design. i precise, the arrow inside the circle is not an icon, but a string type variable.
You can use a container with Circle shape, and inside that, please center the text like below code:
Container(
width: 60,
height: 60,
child: Center(child: Text("Your text"),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1)),
)
I have edited you code so please try this and let me know.
ListTile(
leading: Container(
height: 50,
width: 50,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: Text(
'Text',
style: TextStyle(fontSize: 17),
),
),
),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
);
I hope it's work
I have a column with three rows:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
As a result, I have three rows aligned to start.
How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!
EDIT
Whole build() method attached
Problem:
By default, the width of the Column is set to the width of the widest child widget of Column.
Solution:
You need to wrap your Column with either Expanded or Flexible.
Like below.
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
or
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.
Like below:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
or
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
UPDATE
You haven't given a width to the column so it does not know the remaining width that it can take. So wrap your column in a flexible which will give it the width remaining to expand.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Row(
UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);
Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.