I have a list of object. There is a name that can be long and according to design it should end with three dots if it can't fit
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(_model._organizerLogo),
backgroundColor: Colors.transparent,
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
_model._eventName,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
])
],
),
)
Wrapping Container in Flexible or Expandable didn't work.
How to make oversized text ellipsis? Thanks!
Add Expanded to your Column to give it a fixed width based on the remaining space.
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(_model._organizerLogo),
backgroundColor: Colors.transparent,
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
_model._eventName,
style: TextStyle(
fontSize: 15,
color: Colors.black,
fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
...
])
),
],
),
)
Here is the working solution:
Container(
height: 72,
constraints: BoxConstraints(minWidth: double.infinity),
child: Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16.0, right: 16.0),
child: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(poolImageUrl),
backgroundColor: Colors.transparent,
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: Text(
"This will not overflow now, because we have put it in Expanded, you can try any long string here for test",
style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500),
textAlign: TextAlign.start,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
Related
after I write my posts in my application, my photo and date center the text. I need to pin the photo and date to the beginning. What should I do for this?
............................................................................................................................................................................................
child: Row( children: [
Padding(
padding: EdgeInsets.only(top: 15),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
userData['photoUrl'],
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(left: 8, top: 20),
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
userData['username'],
style: TextStyle(
fontWeight:
FontWeight.bold),
),
Container(
width: double.infinity,
padding: const EdgeInsets.only(
top: 8,
),
child: RichText(
text: TextSpan(
style: const TextStyle(
color: primaryColor),
children: [
TextSpan(
text:
' ${(snap.data()! as dynamic)['description']}',
),
],
),
),
),
],
),
),
),
),
Container(
padding:
EdgeInsets.symmetric(vertical: 4),
child: Text(
DateFormat.yMd().format(
(snap.data()!
as dynamic)['datePublished']
.toDate(),
),
style: const TextStyle(
fontSize: 15,
color: secondaryColor,
),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
In your Row, set crossAxisAlignment: CrossAxisAlignment.start. This will cause the Row's children to be aligned at the top of the row.
I'm building an app and I want to show this text but i need put some "limit" to not happen this:
card with overflow
so, I tried a few things (like SizedBox to limit the text, AutoSizeText to change the font size... but i don't know how to limit this and make this responsive), but to no avail.
this is the code of the card:
Card(
child: Container(
height: 120,
child: Padding(
padding: EdgeInsets.only(
left: 15,
right: 15,
top: 10,
bottom: 10,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ClipOval(
child: Image.network(
pedido.logomarca,
height: 90,
width: 90,
),
),
Padding(
padding: EdgeInsets.only(left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(
child: AutoSizeText(
pedido.nomefantasia.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
Row(
children: <Widget>[
ClipOval(
child: Container(
height: 10,
width: 10,
color: Colors.green,
),
),
Padding(
padding: EdgeInsets.only(
left: 8,
),
child: Text(
pedido.statuspedidodescricao,
),
),
),
],
),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
DateFormat('dd/MM/yyyy').format(pedido.datavenda),
style: TextStyle(
color: Colors.blueGrey,
fontSize: 14,
),
),
Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
'R\$ ${pedido.valortotal.toStringAsFixed(2).replaceAll('.', ',')}',
style: TextStyle(
color: Colors.green[600],
fontSize: 16,
),
),
),
telefone
? OutlineButton(
onPressed: () {},
splashColor: Colors.green,
highlightColor: Colors.green,
highlightedBorderColor: Colors.green,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Ligar'),
Padding(
padding: EdgeInsets.only(left: 3),
child: Icon(
Icons.call,
size: 15,
),
),
],
),
)
: Container(),
],
),
),
],
),
),
),
),
AutoSized text has a parameter you need to set. maxlines: 2
AutoSizeText(
pedido.nomefantasia.toUpperCase(),
maxlines: 2,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Documentation
change this:
Padding(
padding: EdgeInsets.only(
left: 8,
),
child: Text(
pedido.statuspedidodescricao,
),
),
to this:
Expanded(
child: Padding(
padding: EdgeInsets.only(
left: 8,
),
child: Text(
pedido.statuspedidodescricao,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
)
Here's my widget tree that's causing me the problems:
Container(
margin: EdgeInsets.all(15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: cardBorderRadius,
child: Image(
image: NetworkImage(widget.article["thumbnail"]),
width: MediaQuery.of(context).size.width * .18,
height: MediaQuery.of(context).size.width * .18,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.only(left: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 15),
child: Text(
widget.article["title"],
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 28,
),
),
),
Container(
padding: EdgeInsets.only(top: 20),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 5),
child: Icon(Icons.star_border, size: 15),
),
Text(
'${widget.article["readTime"] ~/ 60} min',
overflow: TextOverflow.clip,
maxLines: 3,
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
],
),
),
],
),
),
],
),
);
Now the problem is I am getting this effect rather than text get clipped.
Note: I have tried other answers as well using the Expanded & Flexible widgets but none of them worked for me.
Any help will be appreciated!
Put the textfield into a flexible widget like this (work for me):
Row(
children: <Widget>[
Flexible(
child: Text(
"some text",
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
),
),
... more widgets
],
),
I am currently trying to create a table like structure within my code and am sure there is an easier way of completing this rather than what I have already attempting which is bulky and achieves an incorrect outcome.
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 750,
child: Stack(
children: <Widget>[
Positioned(
right: 0,
top: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.only(
left: 20.0,
top: 20.0,
),
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
'How much should I charge?',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
Positioned(
top: 60,
right: 90,
left: 0,
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Currency used for this campaign: USD\$',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 14.0,
),
),
],
),
),
),
Positioned(
top: 90.0,
left: 3.0,
right: 3.0,
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Divider(
height: 10.0,
color: Colors.black45,
),
),
),
Positioned(
top: 95.0,
left: 3.0,
right: 3.0,
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: Text(
'IN-FEED POSTS',
style: TextStyle(
fontSize: 18,
color: Colors.deepPurpleAccent,
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold),
),
),
],
),
Container(
height: 60,
child: VerticalDivider(color: Colors.black45)),
],
),
),
Positioned(
top: 125.0,
left: 3.0,
right: 3.0,
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: Text(
'Followers per account',
style: TextStyle(
fontSize: 14,
fontFamily: 'OpenSans',
),
),
)
],
),
Container(
height: 60,
child: VerticalDivider(color: Colors.black45)),
],
),
),
],
),
),
This is the final outcome I have so far achieved using this code strategy.
Can anyone suggest another strategy?
I think the simplest way is to use row and column.
I'm not in front of PC, you can try with something like that!
Column
Text,
Text,
Row
Container -> border.only
Column
Text
Text
Container -> border.only
Column
Text
Text
Hope this help.
I've made a solution working with TableRow, the structure is quite similar to that Simone's made.
Check it out below...
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'How much should I charge?',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'OpenSans',
),
),
),
Padding(
child: Text(
'Currency used for this campaign: USD\$',
style: TextStyle(
fontFamily: 'OpenSans', fontSize: 14.0, color: Colors.grey),
),
padding: EdgeInsets.only(bottom: 10),
),
Container(
child: Table(
border: TableBorder(
top: BorderSide(width: 2, color: Colors.grey.shade300),
verticalInside:
BorderSide(width: 1, color: Colors.grey.shade300),
),
children: [
TableRow(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
child: Text(
'IN-FEED POSTS',
style: TextStyle(
fontSize: 18,
color: Colors.pinkAccent,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(top: 10),
),
Padding(
child: Text(
'Followers per account',
style: TextStyle(
fontSize: 14,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(bottom: 10),
),
],
),
Container(
child: Column(children: <Widget>[
Padding(
child: Text(
'Another text...',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(top: 10),
),
]),
),
],
),
],
),
),
],
),
),
UI Layout
If the purple area is inside an Expanded widget, how would I go about to position the button? I've implemented that UI by setting a fixed height to the purple container but haven't been able to understand how to achieve the same effect if the height is variable, depending on the content.
I was able to get close by using Stack and Positioned widgets but then the button is not really clickable. If anyone can give me a general idea on how to achieve the desired goal I would be thankful.
Here's my attempt (demo case)
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 1,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Stack(
children: <Widget> [
Padding(
padding: const EdgeInsets.only(bottom: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.book,
color: Colors.white,
size: 40.0
),
Container(
width: 90.0,
child: new Divider(color: Colors.white),
),
Text(
"Some random text -",
style: TextStyle(color: Colors.white, fontSize: 25.0),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, right: 70.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
'More random text that can vary a lot!',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random text ',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Text(
'Random',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
Positioned(
bottom: 0.0,
left: MediaQuery.of(context).size.width - 100.0,
child: FractionalTranslation(
translation: const Offset(0.0, 0.8),
child: FloatingActionButton(
backgroundColor: Colors.white,
foregroundColor: Colors.redAccent,
child: new Icon(
Icons.map
),
onPressed: () {
},
),
),
),
]
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8.0),
child: Row(
children: <Widget>[
Flexible(
child: Text(
"Random text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 16.0,
color: Colors.black38
)
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Random text - long text",
style: new TextStyle(
fontFamily: 'Raleway',
fontSize: 18.0
)
),
),
],
)
],
)
),
),
],
);
Explaining what I described in the comments:
You can use the FractionalTranslation widget to shift your FAB half way down.
FractionalTranslation(translation: Offset(0, .5), child: FloatingActionButton(...))
This requires you to have it positioned at the bottom of the purple area (referring to your screenshot) beforehand, but I assume that you have that figured out.