How to make my content responsive and not overflow on container - flutter

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

Related

Reduce space between specific children in column widget

What is this space in between and how do I remove/reduce it?
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/weather/cloudy-night.svg',
width: 300,
),
Text(
'Temperature',
style: GoogleFonts.inter(
fontSize: 75,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Text(
'Datetime',
style: GoogleFonts.inter(
fontSize: 30,
color: Colors.white,
),
),
],
),
)
Add height to text
Text(
'Temperature',
style: GoogleFonts.inter(
fontSize: 75,
fontWeight: FontWeight.bold,
color: Colors.white,
height: 1,
),
),

reduce some spaces in my column widgets after using mainAxisAlignment.spaceBetween

I am trying to space out my widgets and it worked with mainAxisAlignment.spaceBetween under my column widget but i want to get some widgets closer to each other than some. How do I lessen the space between some specific wigets...Below is my flutter code
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
onPressed: () {
debugPrint('Search pressed');
},
icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),
Instead of using spacebetween you can just add some SizedBox()'s in between to have full control over the spacings
If you want to add custom spaces so the best way is to use SizedBox(). You can still use spacebetween but you can add sizebox in between and add height. Now you would say that it will not be responsive so for that in width you can use MediaQuery.of(context).size.height / Number which you want(This number will increase and decrease the height.
So something like this:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
onPressed: () {
debugPrint('Search pressed');
},
icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
SizedBox(
height: 30
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),
Instead of using spaceBetween you can use spaceAround or spaceEvenly. If it doesn't satisfy your need, use LayoutBuilder as parent widget [body:LayoutBuilder(...)].
You will have better control over UI using constraints.
LayoutBuilder(
builder: (context, constraints) => Column(
// mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(' '),
const Padding(
padding: EdgeInsets.only(left: 35.0),
child: Text(
'Cape Coast',
style: TextStyle(
fontSize: 40,
fontFamily: 'Dongle',
fontWeight: FontWeight.w700,
),
),
),
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {
debugPrint('Search pressed');
},
// icon: const FaIcon(FontAwesomeIcons.locationArrow),
),
],
),
SizedBox(
height: constraints.maxHeight * .2,// space you need
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Today, ',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
Text(
'22:07',
style: TextStyle(
fontFamily: 'Dongle',
fontSize: 35,
fontWeight: FontWeight.w100),
),
],
),
],
),
)
More about LayoutBuilder

Layout In Flutter

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")),
]
),
],
)
),
)
);

How do I align the text on the left side and the icon on the right side?

I am trying to align the name of the food and the price to the left side and the Icon to the right. I can't seem to get it with Row, Stack, or a mixture of Container and Column Widgets.
Here is the code:
return Container(
decoration: BoxDecoration(
color: Colors.blue
),
child: Column(
children: <Widget>[
Container(
width: 175,
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(90),
image: DecorationImage(fit: BoxFit.cover, image: img)),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
Icon(Icons.add_circle_outline, size: 32)
],
),
],
),
);
}
Here is what it looks right now: https://cdn.discordapp.com/attachments/626321327791538188/727585975349280889/Capture10.PNG
You can force widgets in Columns and Rows to take up as much available space as possible with the Expanded, Flexible, and Spacer(which is just an empty expanded) widgets. There are multiple ways to accomplish what you need, each with their own benefits, but should all accomplish what you need.
Probably the easiest method is to add a Spacer in between the Icon and Column containing Text:
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
Spacer(),
Icon(Icons.add_circle_outline, size: 32)
],
),
The alternative is to wrap either the Column containing Text or Icon in Expanded, though I would recommend wrapping the Column to give the Text extra room.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(name,
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.w500,
)),
SizedBox(height: 4),
Row(
children: <Widget>[
Text("\$" + price.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
fontWeight: FontWeight.w600,
)),
Text("/kg",
style: GoogleFonts.ubuntu(
fontSize: 14,
fontWeight: FontWeight.w400,
))
],
)
],
),
),
Icon(Icons.add_circle_outline, size: 32)
],
),

Flutter row element remain center even using alignment or column element could not change it row align left?

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,
),
),
],
),
);
}