Flutter Row Column Layout not full width - flutter

I want to have "Priority" on the right side of my screen but I cant get the Column to be full width. MainAxisAlignment doesn't work to expand the field.
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.task_alt_sharp , size: 50.0),
SizedBox(width: 20.0),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:[
Row(
mainAxisAlignment: MainAxisAlignment.end,
//crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(task.tag,style: const TextStyle(fontSize: 20, color: Colors.blue)),
Text(" Priority "),
Text(" Priority "),
],
),
SizedBox(height: 5.0),
Text(task.omschrijving),
]
),
)
]
),


you need to expand your container
Column(children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.transform, size: 50.0),
SizedBox(width: 20.0),
Expanded( // here changes need
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
//crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("P645",
style: const TextStyle(
fontSize: 20, color: Colors.blue)),
Text(" Priority "),
],
),
SizedBox(height: 5.0),
Text(task.omschrijving),
]),
),
)
],
),
],
))
])


Try below code hope its help to you. refer Row() class here refer layout here
Column(
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(
Icons.task_alt_sharp,
size: 50.0,
),
SizedBox(width: 20.0),
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blueAccent,
),
),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
//crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'task.tag',
style: const TextStyle(
fontSize: 20,
color: Colors.blue,
),
),
Text(" Priority "),
Text(" Priority "),
],
),
SizedBox(height: 5.0),
Text('task.omschrijving'),
],
),
),
],
),
],
),
),
],
),
Result Screen->

Related

How can I manage alignment with multiple rows and columns?

I'm trying to make a card with some elements.
However it is hard to locate elements in right place with multiple rows and columns.
I tried with mainAxisAlignment, crossAxisAlignment, SizedBox, Expanded and so on.
Especially using Expanded make my widget disappear unlike my expectation.
How can I locate element to right place?
What I did
What I want
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Column(
children:[
Row(
children:[
Text('2'),
Text('3'),
Text('4'),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Text('7'),
Text('8'),
Text('9'),
Text('10'),
],
),
],
),
],
),
),
],
),
),

Here you go, this should be work as you wanted. i've tried to run it and yep it work
Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('1'),
Row(
children: [
Flexible(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
width: 70,
height: 70,
color: const Color(0xffD9D9D9),
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "2"),
PaddingText(text: "3")
],
),
Row(
children: [
PaddingText(text: "4"),
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "5"),
PaddingText(text: "6")
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "7"),
PaddingText(text: "8")
],
),
Row(
children: [
PaddingText(text: "9"),
PaddingText(text: "10")
],
),
],
),
],
),
),
],
),
],
),
),
and dont forget to add this to your project
class PaddingText extends StatelessWidget {
PaddingText({Key? key, required this.text}) : super(key: key);
String text;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Text(text),
);
}
}

This must work
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Expanded(
child: Column(
children:[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Expanded(
child: Row(
children: [
Text('2'),
Text('3'),
],
),
),
Expanded(child: Row(
children: [
Text('4')
],
)),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Expanded(child: Row(
children: [
Text('7'),
Text('8'),
],
)),
Expanded(child: Row(
children: [
Text('9'),
Text('10'),
],
))
],
),
],
),
),
],
),
),
],
),
)

Flutter expand row inside of a column

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: [],
)
],
),
),
),
],
),
),

Align two checkboxes in a column that have text next to them

Here is what it looks like right now , first row is text, check, then tooltips, the other row has an Icon too for premium. I want the checkboxes & tooltip to be aligned perfectly vertically What is the best way to align these? I've played around with axisalignment but it doesn't work. Here is the general structure of my code.
Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"hey"),
Checkbox(),
const Tooltip(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.star,
color: Colors.yellow,
),
Text("hello "),
Checkbox(),
const Tooltip(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help))
],
)])

You can use Expanded to fix them in a row and same position but there is a widget different between these rows. I gave a Text widget to fix them. You can try in your own with expanded.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(child: Text('')),
const Expanded(child: Text("hey")),
Expanded(child: Checkbox(onChanged: (bool? value) { }, value: false,)),
const Expanded(
child: Tooltip(
message: '',
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Expanded(
child: Icon(
Icons.star,
color: Colors.yellow,
),
),
const Expanded(child: Text("hello ")),
Expanded(child: Checkbox(onChanged: (bool? value) { }, value: false,)),
const Expanded(
child: Tooltip(
message: '',
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.only(top: 8.0),
child: Icon(Icons.help)),
)
],
)
]),

How to position these icons in Flutter?

I'm trying to re-create layout from Gmail, but I don't know how to position icons in my layout.
Here's an Image how I want these icons to look like:
Here's an image of what I already did in Flutter:
I want the icons to have a space between them and I'd like them to be at the same level of height as "McDonald Poland".
Is there anyone, who can help me?
Code:
import 'package:flutter/material.dart';
class GeneratedMailCouponScreen extends StatelessWidget {
final String couponImage;
GeneratedMailCouponScreen({Key key, #required this.couponImage}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
Icons.arrow_back
)
],
),
Row(
children: [
Icon(
Icons.archive
),
SizedBox(width: 5.0),
Icon(
Icons.delete
),
SizedBox(width: 5.0),
Icon(
Icons.mail
),
SizedBox(width: 5.0),
Icon(
Icons.more_vert
)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Voucher', style: TextStyle(color: Colors.black, fontSize: 18.0)),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text('Odebrane', style: TextStyle(color: Colors.black, fontSize: 12.0),),
),
)
],
),
Row(
children: [
Icon(
Icons.star_border
)
],
)
],
),
SizedBox(height: 16.0),
Row(
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100],
shape: BoxShape.circle
),
child: Center(
child: Text('M', style: TextStyle(fontSize: 20.0),),
)
),
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('McDonalds Poland', style: TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj', style: TextStyle(color: Colors.grey))
],
),
Row(
children: [
Text('do mnie', style: TextStyle(color: Colors.grey)),
Icon(
Icons.expand_more
)
],
)
],
),
Row(
children: [
Icon(
Icons.reply
),
Icon(
Icons.more_vert
)
],
)
],
)
],
)
],
),
),
),
);
}
}

I have made some modifications to your code please check is it works for you
import 'package:flutter/material.dart';
class GeneratedMailCouponScreen extends StatelessWidget {
final String couponImage;
GeneratedMailCouponScreen({Key key, #required this.couponImage})
: super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [Icon(Icons.arrow_back)],
),
Row(
children: [
Icon(Icons.archive),
SizedBox(width: 5.0),
Icon(Icons.delete),
SizedBox(width: 5.0),
Icon(Icons.mail),
SizedBox(width: 5.0),
Icon(Icons.more_vert)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
'Voucher',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text(
'Odebrane',
style:
TextStyle(color: Colors.black, fontSize: 12.0),
),
),
)
],
),
Row(
children: [Icon(Icons.star_border)],
)
],
),
SizedBox(height: 16.0),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
),
),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'McDonalds Poland',
style: TextStyle(color: Colors.black),
),
SizedBox(width: 8.0),
Text(
'Wczoraj',
style: TextStyle(color: Colors.grey),
)
],
),
Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
)
],
),
Spacer(flex: 1,),
Row(
children: [Icon(Icons.reply), Icon(Icons.more_vert)],
)
],
)
],
),
),
),
);
}
}

I made a some changes. Now these icons are same height as text height, I hope works for you
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [Icon(Icons.arrow_back)],
),
Row(
children: [
Icon(Icons.archive),
SizedBox(width: 5.0),
Icon(Icons.delete),
SizedBox(width: 5.0),
Icon(Icons.mail),
SizedBox(width: 5.0),
Icon(Icons.more_vert)
],
)
],
),
SizedBox(height: 16.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text('Voucher',
style:
TextStyle(color: Colors.black, fontSize: 18.0)),
SizedBox(width: 8.0),
Container(
color: Colors.grey[200],
child: Padding(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
child: Text(
'Odebrane',
style:
TextStyle(color: Colors.black, fontSize: 12.0),
),
),
)
],
),
Row(
children: [Icon(Icons.star_border)],
)
],
),
SizedBox(height: 16.0),
Container(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
)),
SizedBox(
width: 16,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Text('McDonalds Poland',
style:
TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj',
style:
TextStyle(color: Colors.grey)),
],
),
),
Container(
child: Row(
children: <Widget>[
Icon(Icons.reply),
Icon(Icons.more_vert)
],
),
)
],
),
),
Container(
child: Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
),
)
],
),
),
),
],
),
),
],
),
),
),
);
}

this is work! You have to put the 'M' Container inside the Row and put the icons inside a Container
return Scaffold(
body: Container(
padding: EdgeInsets.only(top: 50),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: 45.0,
width: 45.0,
decoration: BoxDecoration(
color: Colors.blue[100], shape: BoxShape.circle),
child: Center(
child: Text(
'M',
style: TextStyle(fontSize: 20.0),
),
)),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text('McDonalds Poland',
style: TextStyle(color: Colors.black)),
SizedBox(width: 8.0),
Text('Wczoraj',
style: TextStyle(color: Colors.grey))
],
),
Row(
children: [
Text('do mnie',
style: TextStyle(color: Colors.grey)),
Icon(Icons.expand_more)
],
)
],
),
],
),
Container(
padding: EdgeInsets.only(top: 50),
child: Row(
children: [
Icon(Icons.reply),
Icon(Icons.more_vert)
],
),
)
],
)
])),
);

How to make the String down line when it's width is more than Container width

I'm making a chat app same as whatsapp but I have a problem with the messages when it is wide appear with overflow from the right .
Image of problem :
Here is the code of showing the messages :
Row(
mainAxisAlignment: snapshot.data['$index']['SENDER'] == widget.myname
? MainAxisAlignment.end
: MainAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10)
),
margin: EdgeInsets.only(left :2.5,top:2.5 ,right: 100),
padding: EdgeInsets.all(6),
child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(snapshot.data['$index']['TEXT'],
style: TextStyle(fontSize: 17), textAlign: TextAlign.end),
SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(child: Text(
snapshot.data['$index']['TIME']['TIME'],
style: TextStyle(fontSize: 10),
textAlign: TextAlign.end)),
],
),
],
)
),
],
);