Related
I think the best way to explain my issue is with images, so this is what I want to achieve, dont mind the styling of either image.
But when I try to implement it myself, the bottom text gets indented.
Here are my code. Note I am new to flutter, so tips are also appreciated.
SizedBox(
width: 580,
height: 95,
child: Material(
color: panelBackground,
borderRadius: BorderRadius.circular(5),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 5),
RichText(
text: const TextSpan(
text: "Made by: ",
style: TextStyle(
fontSize: 14,
color: Color(0xFF838383),
),
children: [
TextSpan(
text: '/',
style: TextStyle(
color: Colors.amber,
fontWeight: FontWeight.bold)),
TextSpan(
text: '6u5t4v',
style: TextStyle(
color: Colors.amberAccent,
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic))
])),
],
),
Column(
children: [Text("rating here")],
),
const SidebarIcon(
icon: Icon(Icons.save),
)
],
),
),
),
),
Just set crossAxisAlignment to start
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
you have to warp Text with Align Widget and given following code
Align(alignment:Alignment.topLeft, child:"your Widget")
I'm trying to fix this padding issue, but it still occur. And i want a gap below the buttons too. please help how to fix it.
Error:
A RenderFlex overflowed by 7.0 pixels on the bottom.
The relevant error-causing widget was
Column
Error is pointing on ListTile's leading and trailing Column.
Here is my code
var appointmentCards = Column(
children: [
SizedBox100(),
SizedBox20(),
ListView.builder(
itemCount: category.length,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
// return upcomingAppointmentCard(context);
return Container(
margin: EdgeInsets.symmetric(horizontal: 25, vertical: 7),
child: Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
ListTile(
leading: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"08:30",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18,
fontFamily: fontFamily),
),
Text(
"Thurday",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: fontFamily),
),
Text(
"9 March 2021",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: fontFamily),
),
],
),
trailing: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
"Dr. Maria",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18,
fontFamily: fontFamily),
),
Text(
"Thurday",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: fontFamily),
),
Text(
"9 March 2021",
style: TextStyle(
color: Colors.black,
fontSize: 12,
fontFamily: fontFamily),
),
],
),
),
// Row(
// mainAxisAlignment: MainAxisAlignment.start,
// children: [
// Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: const [
// Text(
// "08:30",
// style: TextStyle(
// fontWeight: FontWeight.bold,
// color: Colors.black,
// fontSize: 18,
// fontFamily: fontFamily),
// ),
// Text(
// "Thurday",
// style: TextStyle(
// color: Colors.black,
// fontSize: 12,
// fontFamily: fontFamily),
// ),
// Text(
// "9 March 2021",
// style: TextStyle(
// color: Colors.black,
// fontSize: 12,
// fontFamily: fontFamily),
// ),
// ],
// ),
// SizedBox(
// width: MediaQuery.of(context).size.width * 0.2,
// ),
// Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: const [
// Text(
// "Dentist",
// style: TextStyle(
// fontWeight: FontWeight.bold,
// color: Colors.black,
// fontSize: 18,
// fontFamily: fontFamily),
// ),
// Text(
// "Dentist",
// style: TextStyle(
// color: Colors.black,
// fontFamily: fontFamily),
// ),
// Text(
// "Jinnah",
// style: TextStyle(
// color: Colors.black,
// fontFamily: fontFamily),
// ),
// ],
// ),
// // SizedBoxWidth10(),
// ],
// ),
SizedBox20(),
appointmentTile == 'Upcoming'
? Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
customButtonWithWhiteBg(
context,
Text(
"Cancel",
style: TextStyle(
fontSize: 15,
fontFamily: fontFamily,
fontWeight: FontWeight.w400),
),
MediaQuery.of(context).size.height * 0.05,
() {}),
customButtonWithWhiteBg(
context,
Text(
"Reschedule",
style: TextStyle(
fontSize: 15,
fontFamily: fontFamily,
fontWeight: FontWeight.w400),
),
MediaQuery.of(context).size.height * 0.05,
() {}),
],
)
: Padding(padding: EdgeInsets.zero)
],
),
),
);
},
),
SizedBox10(),
],
);
Try this..
Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("08:30",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18)),
Text("Thurday ",
style:
TextStyle(color: Colors.black, fontSize: 12)),
Text("9 March 2021",
style:
TextStyle(color: Colors.black, fontSize: 12)),
],
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("Dr. Maria",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18)),
Text("Thurday",
style:
TextStyle(color: Colors.black, fontSize: 12)),
Text("9 March 2021",
style:
TextStyle(color: Colors.black, fontSize: 12)),
],
),
),
],
),
),
Try to wrap your Text Widgets inside Expanded or Flexible Widget.
Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
ListTile(
leading: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"08:30",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18,
),
),
),
Expanded(
child: Text(
"Thurday",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
),
Expanded(
child: Text(
"9 March 2021",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
),
],
),
trailing: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Text(
"Dr. Maria",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 18,
),
),
),
Expanded(
child: Text(
"Thurday",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
),
Expanded(
child: Text(
"9 March 2021",
style: TextStyle(
color: Colors.black,
fontSize: 12,
),
),
),
],
),
),
],
),
),
Result Screen->
I am currently working on a project and pretty new to flutter. I am finding it difficult to achieve this outlook. Please any help will be appreciated. This is a header of an application and this is what I have done so far. Thank you.
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
Colors: colors,
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
children: [`enter code here`
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}
you can use code below:
class HeaderWiget extends StatelessWidget {
final Color colors = Colors.amber;
return Container(
padding: const EdgeInsets.only(
top: 30,
bottom: 10,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
);
}
try this code
class HeaderWiget extends StatelessWidget {
return Container(
width: MediaQuery.of(context).size.width,
height: 100,
decoration: BoxDecoration(
color: CustomColor.uplanitBlue,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Text('What do you do?',
style: GoogleFonts.workSans(
fontSize: 28,
fontWeight: FontWeight.w500,
)),
Text('You can select multiple options',
style: GoogleFonts.workSans(
fontSize: 16,
fontWeight: FontWeight.w400,
))
],
),
FlatButton(
onPressed: () {},
child: Text(
'Skip',
style: GoogleFonts.workSans(
color: Colors.white,
decoration: TextDecoration.underline,
fontSize: 16,
fontWeight: FontWeight.w400,
),
),
),
],
),
],
),
);
}
I have a function that returns an AlertDialog. Here's a screenshot of what it looks like: https://i.stack.imgur.com/ZPVFI.jpg. And here's the code for it:
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
],
),
Container(
//width: 100,
child: Text(
details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
)
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
The rows containing "Data" and "Tipologia" are no issue. But after "Descrizione" there's a Text widget that contains a string of variable length. I'd like said text to be displayed on multiple lines, starting right after "Descrizione: " (just like "pratico" starts right after "Tipologia: "). How do I do it?
Edit: here's how it looks like now https://i.stack.imgur.com/fKajB.jpg
I'd suggest you go with RichText() instead of Row() with Texts
Just Like What follows
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
),
so your code should look like
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
All you have to do is make a couple simple changes to your code
details[5] != ''
? Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment
.start, // This will change how the multi-line text is aligned
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Flexible(
child: Text(
details[5],
style: test.GoogleFonts.quicksand(
color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
),
],
),
)
: Offstage(child: Text('invisible')),
Let me know if you need anything else
Here is what my container looks like on the emulator (Pixel 3) :
And now this is what it looks like on my Galaxy S9 :
The text of my column is overflowing. I thought it would "adapt" automatically, but it seems that it's not the case.
The code of the 4 elements that are overflowing is :
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'Standard legroom',
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(width: 7.0,),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400
),
),
],
)
],
)
],
),
Any idea on what should I change so that the text doesn't overflow its container ?
Thank you.
I would suggest to wrap your overflowing widgets with Expanded widget. Hope it will help.
UPD
I just used code above on some old device with mdpi resolution. To fix overflow I've added Expanded to the second Column, it solves the overflow issues, but it 'Standard legroom' text is still overflowing. So in case of really long String I would suggest to add overflow: TextOverflow.ellipsis for your Text.
In case you want to keep whole string, just add Expanded to the overflowing Text widget. But in this case there will be to lines text, and it could not be a solution.
Anyway here is my final code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
//mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.turned_in_not,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Economy',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'Terminal 1',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
),
],
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.airline_seat_legroom_normal,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Expanded(
child: Text(
'Standard legroom',
overflow: TextOverflow.ellipsis,
style: TextStyle(
//fontFamily: 'SamsungSans',
fontSize: 14.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
),
],
),
SizedBox(
height: 15.0,
),
Row(
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.grey[700],
size: 18.0,
),
SizedBox(
width: 7.0,
),
Text(
'1 included',
style: TextStyle(
fontFamily: 'SamsungSans',
fontSize: 15.0,
color: Colors.grey[700],
fontWeight: FontWeight.w400),
),
],
)
],
),
)
],
);
]2