I am supporting an app for landscape mode in which I want to align Text widgets in my custom List Tile(a container widget), but for some reason the alignment does not match and I get the following output
The out put I want is as follows
I use the following code to display the first output.
Container buildTile(Employee employee) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black, width: 1),
boxShadow: [
//BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
]),
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.1,
margin: EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("ID:${employee.employeeId}",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Mobile Number:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeePhone}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
),
),
Container(
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.height * 0.25),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Name:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 24)),
Text("${employee.employeeName}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 24))
],
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Weekly Off:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeeWeeklyOff}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
),
),
Container(
margin: EdgeInsets.only(
left: MediaQuery.of(context).size.width * 0.10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"${employee.employeeRole}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
Text(" ")
],
),
),
],
));
}
I tried wrapping the column in alignment widget but that didn't work. When I try to add margin/padding the entire tile contents are shifted.
Please help
In each column set crossAxisAlignment to start like this:
Column(
crossAxisAlignment: CrossAxisAlignment.start, // <-- add this
mainAxisSize: MainAxisSize.min,
children: [
Text("ID:${employee.employeeId}",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 24)),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Mobile Number:",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20)),
Text("${employee.employeePhone}",
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 20))
],
),
],
)
Use this Widget tree
N.B: it's simple. I didn't make it stylest
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.black, width: 1),
boxShadow: const [
//BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
),
]),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
margin: EdgeInsets.all(8),
child: Padding(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
Column(
children: [
Text("data"),
Text("data"),
],
),
Spacer(),
IconButton(onPressed: () {
}, icon: Icon(Icons.edit))
],
),
),
),
Related
I had implemented a column which has a padding of 16px horizontally, and a child container being one of the children. However, i wanted the whole container to be click-able so wrapped it with a TextButton, as a result its width shrunk somewhat, what can i do to restore it back to original while keeping the entire container as a Button?
Here is the code for the concerned widget:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
TextButton(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onPressed: () {},
)
],
),
)
Replace the TextButton with GestureDetector, like:
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
children: [
Row(
children: [
Text("Add an item",
style: TextStyle(
color: Colors.black,
fontSize: 34,
fontWeight: FontWeight.w700,
letterSpacing: -1.5)),
Expanded(child: SizedBox(width: 1))
],
),
SizedBox(height: 16),
GestureDetector(
child: Container(
width: double.infinity,
height: 460,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.image_rounded,
color: Colors.grey.shade200,
),
],
),
),
onTap:(){}
)
],
),
)
it would look something like:
I'm new to flutter and currently practicing the layout options. I need help with layout from the image below, I used a Row that has 2 children, 2 Columns with 4 Text Widgets. The first column has the text PASSENGER, CONTACT, ETC. and the second columns contains 4 other Text Widgets Jessica Hyde, Numbers and Luggage (I've nested '3 big suitcases and 1 carry on' Text in a Column and in a Row the Text 'French speaker, smoker').
The problem I have is that they are not aligned like in the picture, PASSENGER with the name, CONTACT with the number and etc. My results look like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'PASSENGER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
// SizedBox(
// height: 10.0,
// ),
Text(
'CONTACT',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 10.0,
),
Text(
'LUGGAGE',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 20.0,
),
Text(
'OTHER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wade Wilson',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'+1 212+759-3000',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3 big suitcases',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 2.0,
),
Text(
'1 carry on',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
Text(
'French speaker, ',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'smoker',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
],
),
),
],
);
What is the best way to fix this?
Thanks in advance for your help!
import 'package:flutter/material.dart';
class something extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"The Header",
style: TextStyle(
fontSize: 16,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
Padding(padding: EdgeInsets.only(top: 20)),
_forRows(),
_forRows(),
_forRows(),
_forRows(),
],
);
}
}
Widget _forRows() {
return Row(
children: [
Expanded(
child: Text(
"BANANAS1",
style: TextStyle(fontSize: 16, color: Colors.black87),
),
flex: 2,
),
Expanded(
child: Text("bananas2"),
flex: 6,
)
],
);
}
This might solve your problem.
I think you need to pass width to first text. Ty with below line it will help you
return Scaffold(
body: SafeArea(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Passengers Info"),
Container(height: 50,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("PASSENGER"),width: 100,),
Expanded(child: Text("Jessica Hyde")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("CONTACT"),width: 100,),
Expanded(child: Text("+ your number")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("LUGGAGE"),width: 100,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("3 big suitcases"),
Text("1 carry on"),
],
)
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("OTHER"),width: 100,),
Expanded(child: Text("French speaker, smoker")),
]
),
],
)
),
)
);
I have the following problem when designing, inside a container I have elements that I want to organize like the following design:
until I managed to write this code:
return Container(
child: ListView(
controller: controller,
children: [
Center(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 3,
width: 50,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.circular(5)
),
),
),
SizedBox(
height: 20,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Text('Recorrido',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
SizedBox(
height: 20,
)
],
),
),
Center(
child: Text(
'Informacion del Vehiculo',
style: TextStyle(color: Colors.black),
),
),
Container(
height: 150,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
Text(
'Horas Corridos',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.tachometerAlt,
size: 40,
),
Text(
'30 KM',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Total Distancia',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.thermometerQuarter,
size: 40,
),
Text(
'20',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Combustible',
style: TextStyle(color: Colors.white),
)
],
)
],
),
decoration: BoxDecoration(
color: colorPrimario,
borderRadius: BorderRadius.circular(15)
),
)
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 1), // changes position of shadow
),
],
),
);
the result obtained has been this has this error in design:
How could you correct this design in a correct way and achieve that design?.
thanks for your help.
Try adding some padding to the container which has the row as a child
Container(
height: 150,
padding: EdgeInsets.only(top: 20),
child: Row(
),
),
To fix blue container:
Set crossAxisAlignment of the row to: crossAxisAlignment.Center
For every column in the row, set mainAxisAlignment to mainAxisAlignment.spaceEvenly
first body Container set padding:
body: Container(
padding: const EdgeInsets.all(10.0),
child: ListView(
For Row with icon use Row with Expended Widget:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 2,
child: Container(
child: Row(
children: [
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
)
],
),
)
),
Expanded(
flex: 1,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
)
)
],
),
)
blue Container:
Container(
height: 150,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
For every Column add mainAxisAlignment: MainAxisAlignment.center,
My widget inside row, and I want to set Icon widget possition on topRight but always fail beacuse my Icon always in center possition
I already use
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
To force possition but always fail. How to achieve this situation? Icon always be center
My layout
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage(USER_IMAGE),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: widget.status + "\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: widget.name + "\n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: widget.address,
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
)
Align(
alignment: Alignment.topRight,
child: Icon(
LineAwesomeIcons.heart,
color: lightColor,
size: 36,
),
)
],
),
);
}
I want to output like
Try this one
Container(
padding: EdgeInsets.symmetric(
vertical: 14.0,
horizontal: 18.0,
),
margin: EdgeInsets.only(
bottom: 20.0,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1.0,
blurRadius: 6.0,
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
CircleAvatar(
backgroundColor: Color(0xFFD9D9D9),
backgroundImage: NetworkImage('https://banner2.cleanpng.com/20180920/yko/kisspng-computer-icons-portable-network-graphics-avatar-ic-5ba3c66df14d32.3051789815374598219884.jpg'),
radius: 36.0,
),
SizedBox(width: 10.0),
Flexible(
child: RichText(
text: TextSpan(
text: "status\n",
style: TextStyle(
color: Colors.purple,
fontSize: 12,
fontWeight: FontWeight.w400,
height: 1.3,
),
children: <TextSpan>[
TextSpan(
text: "Name \n",
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w600,
height: 1.3,
),
),
TextSpan(
text: 'Poplar pharma limited Dermatologist San Franscisco CA|5',
style: TextStyle(
color: Colors.black38,
fontWeight: FontWeight.w400,
fontSize: 14,
),
),
],
),
),
),
SizedBox(width: 10.0),
],
),
),
Align(
alignment: Alignment.topCenter,
child: Icon(
Icons.help,
color: Colors.cyan,
size: 36,
),
),
],
),
)
Set crossAxisAlignment to CrossAxisAlignment.start in your Row
Like this
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children : [...]
)
UPDATE
The avatar stays in the center
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(),
SizedBox(width: 20),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("fhfhfj\nufhfhjfhf\njifjifjifj\n",
style: TextStyle(color: Colors.black)),
SizedBox(width: 20),
Icon(Icons.favorite, color: Colors.black),
],
),
],
)
I have the following container and in it I call a function to create child widget. The issue it that child row always remain as center align. I have tried two methods
alignment:Alignment.topLeft,
I have tried to embed it further into a column and tried crossAxisAlignment: CrossAxisAlignment.start.
Both methods fails to align the element to the left. It keep remains into the center part of the container. What could be wrong below is my codes.
Container(
alignment:Alignment.topRight,
margin: const EdgeInsets.fromLTRB(10, 10, 0, 0),
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildDateTime("datetime"),
]
)
],
)
),
Below is the widget which I call to build the row.
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.access_time, size: 15.0, color: lightGrey),
Text(
' 23/01/20202',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
Here is the screen shot.
I've made the Clock icon align to the left, Date centered and time aligned to the right. Is this what you are trying to achieve?
Container(
color: Colors.grey,
alignment:Alignment.topRight,
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: buildDateTime("datetime")
);
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey[100]),
Text(
' 23/01/20202',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
My result:
I am unable to reproduce the issue you mentioned. For me, its occupies full width.
Try this,
Widget buildDateTime(String plate) {
return Align(
alignment: Alignment.centerLeft,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey),
Text(
' 23/01/20202',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
);
}