I Have a card with an icon on the left Column and two texts on the Right Column, the right side first text gets an overflow.
Hoe can I make the right text come to the downside on reaching the right limit.
home: Scaffold(
body: SafeArea(
child: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Column(children: <Widget>[Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
)]),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
)],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('This is the second text'),
],
)
],),
],
),
),
),
),
),
);```
Because Row and Column do not have a static width, it will expand to overflow the screen. To prevent that, wrap your the children with Expanded widget.
Scaffold(
body: Container(
height: 60,
child: Card(
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.access_alarm),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'This is the text one This is the textThis is the textThis is the textThis is the text',
),
Text('This is the second text'),
],
),
),
],
),
),
),
),
I did some modifications to your code, since there were some unnecessary widgets.
Related
I am trying to add padding to the text in the card and for some reason, it is not working.
This is my code:
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 170.0,
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Column(
children: <Widget>[
Align(
child: Text('In an emergency, call 999.'),
alignment: Alignment(-1.2, 0),
),
Align(
child: Text(
"If you're in crisis and need to speak to someone call NHS 111."),
alignment: Alignment(-1.2, 0),
),
],
),
),
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('999'),
onPressed: () => launch("tel://000"),
),
),
ButtonTheme(
minWidth: 150.0,
child: RaisedButton(
padding: EdgeInsets.all(8.0),
child: const Text('111'),
onPressed: () => launch("tel://000"),
),
Currently it looks like this:
I am wanting to add padding around the text so it looks better but using alignment isn't affecting the second subtitle and isn't affecting the padding above or below any of the text. Any help would be appreciated!
Change mainAxisAlignment property of your Column as following and remove the mainAxisSize property
Column(
mainAxisAlignment: MainAxisAlignment.center,
// ...
),
Edit
Adjust your subtitle like this
ListTile(
leading: Icon(Icons.phone),
title: Align(
child: Text('Need immediate help'),
alignment: Alignment(-1.2, 1.0),
),
subtitle: Align(
alignment: Alignment(- 65.0, 1.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('In an emergency, call 999.', textAlign: TextAlign.left,),
Text("If you're in crisis and need to speak to someone call NHS 111.", textAlign: TextAlign.left,),
],
),
),
),
I am getting Error when try to run below script. I am using Expanded widget for showing user followers.
Expanded(
flex: 1,
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildCountColumn("posts", postCount),
buildCountColumn("followers", followerCount),
buildCountColumn("following", followingCount),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildProfileButton(),
],
),
],
),
),
Remove the Expanded parentWidget and get an Expanded Widget for every Widget
Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.red,
child: Text("Hello"),
),
),
Expanded(
child: Container(
color: Colors.yellow,
child: Text("Hello"),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: Text("Hello"),
),
),
],
),
],
),
your **buildProfileButton() or row ** is creating more size widgets then the space available in screen;
Two solutions:
you can put your row in listview to make it scrollable
put each one in Expanded like:
Expanded(
child:buildCountColumn("posts", postCount),
)
to take limited available size in screen -> divided equally within all childs
:: always use expanded/listview/scrollable/widget size less than total screen width
you can get it by mediaQuery.of(context).size.width for flexible row
I'm trying to make a widget like this:
But the problem I've faced with is that if title is too long it pushes the icon (triangle) out of the bounds of card.
What I want to have is the icon should always be at top right corner of the card and title to take all the available space between image and triangle, but not more. If title is too long it should just take new line.
But it should be like this:
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
child: Container(
height: 130,
child: Row(
children: <Widget>[
Image(
image: NetworkImage(product.primaryImage.url),
height: 130,
width: 60,
),
SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Text(
product.name,
maxLines: 2,
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
IconButton(
padding: EdgeInsets.zero,
iconSize: 24,
icon: Icon(Icons.remove_circle_outline),
onPressed: () => onRemove(product),
)
],
),
SizedBox(height: 8),
Text("$quantityInCart x \$$price"),
],
),
],
),
),
);
}
Wrapping title in Expanded doesn't work because parent Row gives it infinite width constraint.
You need to use two Expanded like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 300,
width: 100,
color: Colors.blue,
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text('This is quite a loooooo ooooooooo ooooooo ooooong title',
softWrap: true,
maxLines: 2,
),
),
Icon(Icons.add_alert)
],
),
Text('This is a normal description')
],
),
)
],
)
This is my code and here I just want to know how to add text below the images.
Just let me know, please?
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),
Card(
elevation: 5,
child: Column(
children: <Widget>[
Expanded(
child: Image.asset('assets/img.jpg'),
),
Text('My Image'),
],
),
),
You can put this code row or as you want. You can also put some padding to arrange the text image. If you want constant height and weight put this into a Container Widget and specify the height and weight. Thanks.
child: Column(children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(
children: <Widget>[
Image.asset(
'assets/cat.jpg',
),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
Expanded(
child: Column(
children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('cat')
],
),
),
],
)
]);
},
)
If you want to add a line of text below the images at once
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Image.asset('assets/cat.jpg',
),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
Expanded(
child: Image.asset('assets/cat.jpg'),
),
],
),
Text("Your text here"),
]), // column widget ends here
If you want to add text below each image then
change your Expanded widget with this.
Expanded(
child: Column(
children : <Widget>[
Image.asset('assets/cat.jpg'),
Text("your text here")
]
)
),
else create a function to return a widget as it seems you have plenty of widgets of that kind
Widget getWidget(imagePath, text){
return Expanded(
child: Column(
children : <Widget>[
Image.asset(imagePath),
Text(text)
]
)
)
}
and then use this
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
getWidget('assets/cat.jpg','your text here'),
],
),
]),
You just need to wrap the image in a Column/Stack
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
Expanded(
child: Column(children: <Widget>[
Image.asset('assets/cat.jpg'),
Text('Some text')
],)
),
],
),
I added Dialog, But overflowed on bottow. How to fix like this issue?
return showDialog
return showDialog(
// barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return Dialog(
//this right here
child: Theme(
data: ThemeData().copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(),
), ),
Container in child
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
first Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Text(AppTranslations.of(context).text("minimum_length")),),
Text(": 6")
],),
others rows same like first row
Padding for gray color Allowed text
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Expanded(
child: Text(
AppTranslations.of(context).text("allowed_character"),
style: TextStyle(color: Colors.grey[700]),
), ),],),),),
OK button
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Expanded(child:
FlatButton(
child: Text(
AppTranslations.of(context).text("ok"),
style: TextStyle(fontWeight: FontWeight.bold),
),
onPressed: () => Navigator.of(context).pop(),
),),],)],),),),), );
For the horizontal overflow add a Expanded parent widget for your Text.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(AppTranslations.of(context).text("minimum_length")),
),
Text(": 6")
],
),
And for the vertical overflow add SingleChildScrollView parent for your Column
Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView( child : Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ ...
Wrap your Dialog child element, that is the Container Widget with SingleChildScrollView.
child: SingleChildScrollView(
child: Container(
color: Colors.blueGrey[100],
height: MediaQuery.of(context).size.height / 2.5,
width: MediaQuery.of(context).size.width / 1,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
....
....
],
),
),
),
),