How to prevent Overflow Horizontally? - flutter

I am struggling to make this work but I tried everything and still, I can't make this work. So, I have the structure below:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image
.network(
'$thumbnail',
fit: BoxFit.cover,
)
.image,
),
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.white,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.white.withOpacity(.8)
),
),
],
),
],
),
And it renders like this:
overflow
How can I clip, or wrap that title text without defining a fixed width to a parent widget?


Use Expanded widgets to resist overflow of view
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image.network('https://i.stack.imgur.com/LJ30b.png', fit: BoxFit.cover,).image,
),
SizedBox(
width: 20,
),
Expanded(child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.yellow,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.red.withOpacity(.8)
),
),
],
), ),
],
),


Add Expanded to your inner Column to give it a defined width.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 40.0,
backgroundImage: Image.network(
'$thumbnail',
fit: BoxFit.cover,
).image,
),
SizedBox(
width: 20,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Really biiiig drink name here',
style: TextStyle(
color: Colors.white,
fontSize: 28
),
),
Text(
'Category goes here',
style: TextStyle(
color: Colors.white.withOpacity(.8)
),
),
],
),
),
],
);


If you add an Expand to where the overflow is taking place it should solve the problem.

Related

Aligning two widgets in a row, one in the middle and the next on the right side

I want to place a text widget in the middle of the screen and an icon on the right side. My code is:
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Today',
style: TextStyle(
color: Colors.blue,
fontSize: 26,
fontWeight: FontWeight.w600)),
Icon(
Icons.pause_circle_outline,
color: Colors.blue,
size: 50,
)
],
)
],
)
When I use mainAxisAlignment: MainAxisAlignment.spaceAround I get the following result which is not desired.

You can use MainAxisAlignment.spaceBetween, and adding another widget with same size (as last one) on 1st index to maintain spacing.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
SizedBox(
width: 50,
),
Text(
'Today',
style: TextStyle(
color: Colors.blue,
fontSize: 26,
fontWeight: FontWeight.w600,
),
),
Icon(
Icons.pause_circle_outline,
color: Colors.blue,
size: 50,
)
],
)

You can try this:
Row(
children: const [
SizedBox(
width: 50,
),
Expanded(
child: Center(
child: Text(
'Today',
style: TextStyle(
color: Colors.blue,
fontSize: 26,
fontWeight: FontWeight.w600,
),
),
),
),
Icon(
Icons.pause_circle_outline,
color: Colors.blue,
size: 50,
)
],
)

You should put it inside a Stack, Align the Icon to the right and Align the title in the center. With Expanded and Center you will still lose the space for the Icon, so it's not realy in the center.
Column(
children: [
Stack(
fit: StackFit.loose,
children: [
Align(
alignment: Alignment.center,
child: Text(
'Today',
style: TextStyle(
color: Colors.blue,
fontSize: 26,
fontWeight: FontWeight.w600,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.pause_circle_outline,
color: Colors.blue,
size: 50,
),
),
],
),
],
),

Set mainAxisAlignment: MainAxisAlignment. spaceBetween and a container in the children.
Note:- we are using container because it will occupy all the available space at the starting.
We can also user Spacer() widget but this can throw hasSize error.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Container(),
Text('Today',
style: TextStyle(
color: Colors.blue,
fontSize: 26,
fontWeight: FontWeight.w600)),
Icon(
Icons.pause_circle_outline,
color: Colors.blue,
size: 50,
)
],
)

how to put string inside a circle using listTile in flutter?

i would like to have a circle in which i can put centered text using ListTile widget? what i done is below :
ListTile(
leading: new CircleAvatar(
backgroundColor: color2,
child: new Text(
letter,
style: TextStyle(
color: color,
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
)),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style:
TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
),
and the result :
as you can see, the string is not centered vertically and i would like the do that conserving the same design. i precise, the arrow inside the circle is not an icon, but a string type variable.

You can use a container with Circle shape, and inside that, please center the text like below code:
Container(
width: 60,
height: 60,
child: Center(child: Text("Your text"),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1)),
)

I have edited you code so please try this and let me know.
ListTile(
leading: Container(
height: 50,
width: 50,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: Text(
'Text',
style: TextStyle(fontSize: 17),
),
),
),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
);
I hope it's work

How to set same alignment for these two text

How do I make the second text align with the first text. Excerpt of the code is below
Padding(
padding: EdgeInsets.only(top: 20, bottom: 20, left: 10),
child: Column(
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
Container(
decoration: BoxDecoration(
color: Palette.mainColor,
borderRadius: BorderRadius.circular(8)
),
),
],
),
),
This is how it is at the moment

set the column crossAxisAlignment: CrossAxisAlignment.start

Set CrossAxisAlignment property to Column Widget.
Your Column Widget Should be like this after applying this property.
Column(
crossAxisAlignment: CrossAxisAlignment.start
children: [
Container(
child: Text(
document.data()['Product Title'],
style: TextStyle(
color: Colors.black
),
),
),
SizedBox(height: 10,),
Container(
child: Text(
document.data()['Product Price'],
style: TextStyle(
color: Colors.black,
),
),
),
],
),

Add alignment property to your container.
alignment: Alignment.centerLeft,
Edit:
Ok, I got the problem. #M.M.Hasibuzzaman is right. You need to add crossAxisAlignment: CrossAxisAlignment.start. The correct solution with full code:
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
Column(
children: [
Container(
width: 80,
height: 80,
alignment: Alignment.centerLeft,
child: Image.network(
'https://cdn.friendlystock.com/wp-content/uploads/2020/06/2-loud-speaker-cartoon-clipart.jpg',
)),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"Loud Speaker",
// textAlign: TextAlign.start,
style: TextStyle(color: Colors.black),
),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Text(
"GHS6758",
textAlign: TextAlign.start,
style: TextStyle(
color: Colors.black,
),
),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red, //Palette.mainColor,
borderRadius: BorderRadius.circular(8),
),
),
],
),
],
),
);
}

How to place the widgets close to close?

I am facing the problem
If two widgets added in a column, there is space between the widgets . I need to remove the space between them. how to acheive it.
Container(height: 50,
width: 50,
color: Colors.grey,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(flex: 2,
child: Container(color: Colors.indigo,
child: SizedBox(child: Icon(
Icons.filter_list, color: Colors.white,),))),
Flexible( flex:1, child:
Text('5',style: TextStyle(color: Colors.black),)
),]));
The output should be
Actually i need this scenario also,
Any help is really appreciated

You can add a height of 0.6 to the text widget.
Container(
height: 50,
width: 50,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 2,
child: Text(
'5',
style: TextStyle(color: Colors.black),
),
),
Flexible(
flex: 1,
child: Text(
'5',
style: TextStyle(color: Colors.black, height: 0.6),
),
),
],
),
),

You can easily overlap two widgets using assorted_layout_widgets package with innerDistance argument:
return ColumnSuper(
innerDistance: -8,
children: <Widget>[
Text(
'5',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.filter_list,
color: Colors.blue,
),
]
);

Flutter mainaxisAlignment.spaceEvenly not working on multiple flex(Row & Column)

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