I'm trying to do something which should be extremely simple but can't see how it is done.
I need to align the large text to the centre and the buttons to the right so it looks like image below:
With the code below the widgets are aligned left and right:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
],
),
),
I tried the following method:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
But it resulted in this:
Not sure how or whether it can be done without manually setting a width for the container on the left which is clearly a far from ideal method. Flutter seems to desperately need float:right...
You was almost there. Just "Expanded" in the middle should be removed:
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
Try with ListTile Widget, I have made changes using ListTile, please check if it works for you
Center(
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(15),
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: ListTile(
title: Text('Centred',
textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
subtitle: Text('24.6 %',
textAlign: TextAlign.center, style: TextStyle(fontSize: 48)),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
),
)
child: Center(
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Container(
child: Stack(
children: <Widget>[
Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Centred',
style: TextStyle(fontSize: 32)),
),
Flexible(
child: Text('24.6 %',
style: TextStyle(fontSize: 48)),
),
],
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.only(right: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
)
],
),
),
),
),
Related
I want to align image with the text. I have modified the code to make it happen, but it doesn't show any change.
The image and the text is supposed to be like this.
Instead like the picture above, mine is like this.
Here is my code, I'm using Wrap btw:
Column(
children: [
SizedBox(
width: 350,
child: Wrap(
alignment: WrapAlignment.start,
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
SvgPicture.asset(
Assets.icons.image9.path,
fit: BoxFit.cover,
),
Wrap(
children: [
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Gekyume Onfroy',
style: heading3(
color: ColorName.neutralBackgroundWhite,
),
),
),
],
),
...
onSelected: (_) {},
child: SvgPicture.asset(Assets.icons.moreVertical.path),
),
),
SizedBox(width: 17),
Text(
'Access Code : 6666',
style: body1(color: ColorName.neutralBackgroundWhite),
),
],
),
Do not use wrap, as it will go horizontal to vertical, if mobile device does not have enough space. You have to use Rows and Column instead, check the bottom code for implementation and screenshot:
Container(
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 16.0),
decoration: BoxDecoration(
color: Colors.blue[900],
borderRadius: BorderRadius.circular(12)
),
// width: 350,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
height: 60,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: const DecorationImage(image: NetworkImage('https://cartoonavatar.com/wp-content/uploads/2021/12/02-300x300.png')),
),
width: 60,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text('Gekyume Onfroy', maxLines:1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 20, color: Colors.white)),
Spacer(),
Text('Access Code : 6666', style: TextStyle(fontSize: 14, color: Colors.white),)
],
),
),
const SizedBox(width: 10),
IconButton(padding: EdgeInsets.zero, onPressed: () {}, icon: const Icon(Icons.more_vert, color: Colors.white))
],
),
),
const SizedBox(height: 10),
const Divider(color: Colors.white, thickness: 2,),
const SizedBox(height: 10),
Row(
children: [
const Icon(Icons.call, color: Colors.white),
const SizedBox(width: 10),
const Text('628-123-456-666', style: TextStyle(color: Colors.white)),
const Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.blue[300],
borderRadius: BorderRadius.circular(4)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Last Activity', style: TextStyle(color: Colors.white),),
Icon(Icons.navigate_next, color: Colors.white, size: 14,)
],
),
)
],
)
],
),
),
I'm apologise to do this question again but I was reading similar ones and try to solve my problen and Iwasn't able to fix it.
I need my column(blue one) inside row expands vertically to and have the max heigth.
Here is my code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: AutoSizeText('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: AutoSizeText(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
)),
Column(
children: [
Container(
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: FaIcon(
FontAwesomeIcons.locationDot,
),
),
],
),
],
),
),
],
),
Edited: Added expected output
remove following line from the column widget
mainAxisSize: MainAxisSize.min
Try below code and replace my widget code to your
Container(
height: 70,
color: Colors.amber,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 40),
title: Text('text',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1),
subtitle: Text(
'subText',
maxLines: 1,
style: Theme.of(context).textTheme.subtitle1!.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
fontWeight: FontWeight.w500),
),
),
),
Column(
children: [
Container(
height: 70,
width: 70,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
color: Colors.blue,
),
child: Icon(
Icons.add,
),
),
],
),
],
),
),
Result->
I have a column in and in column i have rows. I want to make rows start in same line.The problem is i cannot put in line the rows.Normally without rows column's texts were in line but i needed to put icons in front of the text so make them as row.I need help with this problem.
This is my code:
Container(
margin: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 58,
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/foldertree.png', scale: 3),
Text('Sınırsız belge',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/t.png', scale: 3),
Text('Metin Algılama (OCR)',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.ac_unit,
color: Colors.blue,
size: 10.0,
),
Text('Word\'e Dönüştür',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/images/prohibited.png', scale: 3),
Text('Reklam YOK',
textAlign: TextAlign.center,
style:
TextStyle(fontSize: 18, color: Colors.white)),
],
))
],
)),
This how it looks:
This is how i want it to look like:
Just replace mainAxisAlignment.center to mainAxisAlignment.start for the rows.
...
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [...
Replace mainAxisAlignment.center with mainAxisAlignment: MainAxisAlignment.start, on Row.
Container(
margin: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 58,
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/foldertree.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Sınırsız belge',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/t.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Metin Algılama (OCR)',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
)),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
Icons.ac_unit,
color: Colors.blue,
size: 10.0,
),
Text('Word\'e Dönüştür',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
),
),
Container(
margin: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset('assets/images/prohibited.png', scale: 3),
// Icon(Icons.ac_unit),
Text('Reklam YOK',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, color: Colors.white)),
],
),
)
],
),
);
I'm trying to align all the text to left. However, it's in the middle always as you can see the image below. I've tried using Align widget and setting textAlign property on Text widget to TextAlign.left but no luck.
card.dart
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Marry Jane',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16),
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Make-up Artist',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
),
Row(
children: <Widget>[
Text(
'3.5',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
Icon(FontAwesomeIcons.starHalf)
],
)
],
),
)
],
),
Have you tried giving the Column CrossAxisAlignment.start?
Row(
children: <Widget>[
Card(
elevation: 2,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(4)),
child: Image.network('https://loremflickr.com/100/100'),
),
),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
/// Add this
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Marry Jane',
style: TextStyle(fontSize: 16),
),
Text(
'Make-up Artist',
style: TextStyle(fontSize: 14, color: Color(0xff666666)),
),
Text(
'3.5',
style: TextStyle(fontSize: 18, color: Color(0xff666666)),
),
],
),
)
],
)
I am creating a screen like Instagram profile but mainaxisAlignment.spaceEvenly is not working. It works just fine if the row is not inside any other row or column but in this case It didn't.
How can I solve this? Please Help.
Container(
margin: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.only(
right: 10.0,
),
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new CachedNetworkImageProvider(
profile.dp,
scale: 100.0,
),
),
),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text(
profile.postcount.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('posts'),
],
),
Column(
children: <Widget>[
Text(
profile.followers.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('followers'),
],
),
Column(
children: <Widget>[
Text(
profile.followings.toString(),
style: TextStyle(
fontWeight: FontWeight.bold),
),
Text('following'),
],
),
],
),
new RaisedButton(
child: Text('Edit Profile'),
onPressed: () {},
),
],
)
],
)
],
)),
Expectation:
Reality:
Here you go
Widget _buildRow() {
return Container(
padding: const EdgeInsets.all(16),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 40,
backgroundImage: AssetImage("your_image_asset"),
),
SizedBox(width: 12),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Text("2", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Gold", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("22", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Silver", style: TextStyle(color: Colors.grey)),
],
),
Column(
children: <Widget>[
Text("5464", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Reputation", style: TextStyle(color: Colors.grey)),
],
),
],
),
OutlineButton(onPressed: () {}, child: Text("CopsOnRoad (Edit Profile)")),
],
),
),
],
),
);
}