I have the following Widget tree of a ListView item:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Align(
child: Assets.images.select.image(height: 20, width: 20),
),
),
Expanded(
flex: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: Text(
food.name,
style: GoogleFonts.cabin(
color: Theme.of(context).primaryColor,
fontSize: FontSize.medium.size,
fontWeight: FontWeight.w700),
),
),
Container(
margin: EdgeInsets.only(top: 4),
child: Text(
"100 g",
style: GoogleFonts.cabin(
color: Color(0xFF777777),
fontSize: FontSize.small.size,
fontWeight: FontWeight.w500),
),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerRight,
child: Text(
"${food.carbohydratesPerGram} g / HC",
style: GoogleFonts.cabin(
color: Theme.of(context).primaryColor,
fontSize: FontSize.medium.size,
fontWeight: FontWeight.w400),
),
),
],
),
)
],
)
But it turns out like this:
I tried putting the ball in a column with "mainAxisAlignment" set to "mainAxisAlignment.center"
How can I get the ball on the left vertically centered in the row?
You can use crossAxisAlignment.
When you are in a row element the main is horizontal axis and the cross is vertical axis
When you are ina column the main is verticla axis and the cross is horizontal axis.
So in your Row element to center element in vertical axis you need to use
crossAxisAlignment: CrossAxisAlignment.center
Managed to get it somewhat working: instead of using an image widget, I used an IconButton widget and it magically worked
Add alignment: Alignment.center to you Assets.images.
Expanded(
child: Align(
alignment: Alignment.center, // This Here
child: Assets.images.select.image(height: 20, width: 20),
),
),
And I think your row is taking the height of your whole screen. If that is the case your image will come to the center of the screen coz your row is on the whole screen make sure that is not the case.
Related
How to do like this
image
code
Row(
children: [
SizedBox(width: 33.w),
Text(
StringRes.getStart,
style: TextStyle(
fontWeight: FontWeight.w500,
color: AppColors.backgroundColor,
fontSize: 13.sp,
),
),
Spacer(),
Icon(
Icons.arrow_forward,
color: AppColors.backgroundColor,
),
SizedBox(
width: 3.w,
),
],
),
i get diffrent diffrent spacing in diffrent device
like this image 2
image 3
I assume what you are looking for is something like this:
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
SizedBox(width: 20),
Text('Get started'),
SizedBox(
width: 20,
child: Icon(Icons.arrow_forward),
),
],
),
),
In this example, the Text widget is centered by having equally large SizedBox widgets on both sides of it and by telling the Row widget to use MainAxisAlignment.spaceBetween. The padding around the Row contents is achieved with the Padding widget, so that it does not interfere with the content alignment.
I hope this helps you.
here is the UI that I'm trying to build
but this is the output
I tried alignment also , but that also didn't working
but when setting a fixed height this is working fine
but I can't fill this using the fit parameter,
here is the code
Scaffold(
backgroundColor: kDarkTheme,
body: SafeArea(
child: Column(
children: [
const SizedBox(height: 10),
Row(
//code for top button
),
const SizedBox(height: 150),
Stack(
children: [
Center(
child: CircleAvatar(
radius: radiusSize + 5,
backgroundColor: kDarkCounterColor,
child: CircleAvatar(
backgroundColor: kDarkTheme,
radius: radiusSize,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.only(top: 35),
child: Text(
'39',
style: GoogleFonts.italiana(
fontSize: 120, color: kDarkCounterColor),
),
),
),
],
),
const SizedBox(height: 15),
const Text(
'Tap To Count',
style: TextStyle(
fontFamily: 'Helvatica',
color: Color(0xff656158),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: SvgPicture.asset(
kDarkThemeImage,
)),
)
],
),
))
this is the code
then the first error appears again. how could I fix this?
You are using the Expanded widget on a column that doesn't have a set size. Try adding MainAxisSize attribute to your column, like this:
Column(
mainAxisSize: MainAxisSize.max, // Add this like
children: [
...
This will make your column fit the whole available size on the previous widget (a scaffold for the whole screen). Then the expanded widget will fill the remaining space not used by the other widgets inside the column.
I am new in flutter and I'm trying to implement screen like this:
As you can see I need to make something like a table. I ran into a problem while implementing table rows. Here is my code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("2.", ),
const SizedBox(width: 10),
Text(text: "This is second with very long text"),
],
),
),
const SizedBox(width: 8),
Text("500"),
],
),
But I'm getting the error:
A RenderFlex overflowed by 42 pixels on the right.
For some reason my text ("This is second with very long text") doesn't move to a new line, but goes off screen.
Please tell me what am I doing wrong?
You have to wrap your Text("This is second with very long text") widget inside Flexible widget like this:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("2."),
const SizedBox(width: 10),
Flexible(
child: Text("This is second with very long text"),
),
],
),
),
const SizedBox(width: 8),
Text("500"),
],
),
Just use a ListTile for that.
ListTile(
leading: Text("2. "),
title: Text("This is second with very long text"),
trailing: Text("500"),
)
This is much simpler to implement and handles long text automatically.
You can set padding etc as you wish. You can find more information about list tiles in the official documentation.
you need a Column, to wrap the widgets inside, inside the column you need a first Row that will hold the first and second,
then a HorizontalLine, and then the rest of the rows:
Please, see the example below
Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
//first row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('First', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
Text('Second', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
]
),
//This SizedBox gives space between widgets
SizedBox(height:5),
Container(color: Colors.black, height: 2, width: double.infinity),
//This SizedBox gives space between widgets
SizedBox(height:5),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('1', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
//In order to make the Text multi-lined you need to wrap-it into a SizedBox widget
SizeddBox(
//as I can see, the middle text widget is almost the 70% of the total width
//You can get the total width from MediaQuery.of(context).size.width
width: MediaQuery.of(context).size.width * 0.7,
child: Text('This is first', style: TextStyle(color: Colors.black)),
),
Text('500', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
]
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('2', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
//In order to make the Text multi-lined you need to wrap-it into a SizedBox widget
SizeddBox(
//as I can see, the middle text widget is almost the 70% of the total width
//You can get the total width from MediaQuery.of(context).size.width
width: MediaQuery.of(context).size.width * 0.7,
child: Text('This is second with a very long text', style: TextStyle(color: Colors.black)),
),
Text('12', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
]
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('3', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
//In order to make the Text multi-lined you need to wrap-it into a SizedBox widget
SizeddBox(
//as I can see, the middle text widget is almost the 70% of the total width
//You can get the total width from MediaQuery.of(context).size.width
width: MediaQuery.of(context).size.width * 0.7,
child: Text('This is third with a long text too', style: TextStyle(color: Colors.black)),
),
Text('150', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
]
),
]
)
In this code, you can change the styling and etc as you wish.
I would suggest you to extract the the Row widget that holds the number, the text and the score in a Stateless widget, or in a method that returns Widget object, but it's very soon for this.
I hope I helped you.
Enjoy Flutter!
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 used a card widget in my flutter App that has two rows, the problem that I have is a large space appeared between the two rows as you can see in the following image
how can fix this problem ?
my code that i tried it here :
return Card(
child: Container(
alignment: FractionalOffset.center,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: ListTile(
title: Text(snapshot.data[index].data["title"],
textDirection: TextDirection.rtl,
style: TextStyle(fontSize: 14.0,
fontFamily: 'Cairo',
fontWeight: FontWeight.bold),),
onTap: () => navigateToDetails(snapshot.data[index]),
),
),
),
//SizedBox(width: 1.0),
Expanded(
flex: 1,
child: Container(child: Image.network(snapshot.data[index].data["image_url"],height: 80.0,width: 80.0)),
),
],
),
),
);
add MainAxisAlignment:MainAxisAlignment.center property to your Row widget
followed code should work for you check this out.
return Card(
child: Container(
alignment: FractionalOffset.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
child: ListTile(
title: Text(
snapshot.data[index].data["title"],
textDirection: TextDirection.rtl,
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Cairo',
fontWeight: FontWeight.bold),
),
onTap: () => navigateToDetails(snapshot.data[index]),
),
),
),
//SizedBox(width: 1.0),
Expanded(
flex: 1,
child: Container(
child: Image.network(snapshot.data[index].data["image_url"],
height: 80.0, width: 80.0)),
),
],
),
),
);
you are using expanded widget inside row so that both the widget try to get same width and also try to cover whole width possible.
so that, if you want to remove space between row widget then remove expanded widget and play with MainAxisAlignment property of Row to arrange or manage the space.
you can use values like:
MainAxisAlignment.spaceBetween and MainAxisAlignment.spaceEvenly