Flutter - How to fix text overflow in a card? - flutter

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,
),
),
)

Related

Align children to top of row in Flutter?

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.

Flutter how do I position this text and icon in a row?

I'm having trouble aligning my text and my icons.
Here's what my output looks like:
I wanted the text to be in the middle left side of the icons.
I've tried adding margins and padding. But the icons just wont align with the text, I even tried placing the icons in a different widget.
Here's my code:
Widget buildFollowText() {
return Padding(
padding: EdgeInsets.only(
left: 5,
top: 5,
),
child: Container(
child: Column(children: [
Padding(
padding: EdgeInsets.only(
left: 0,
right: 250,
),
child: Text(
'or follow us on:',
style: TextStyle(
fontFamily: "DMSans",
fontSize: 15,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: Colors.grey,
),
),
),
Container(
width: 50,
height: 30.0,
margin: EdgeInsets.only(
right: 70,
bottom: 10,
),
child: buildIcons(),
)
])));
}
Widget buildIcons() {
return Padding(
padding: EdgeInsets.only(
top: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: new Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: Icon(
MdiIcons.facebook,
color: Colors.blue,
size: 50,
),
),
),
Expanded(
child: new Padding(
padding: const EdgeInsets.only(bottom: 50.0, left: 40),
child: Icon(
MdiIcons.twitter,
color: Colors.blue,
size: 50,
),
),
)
]));
}
remove the padding.
set mainAxisAlignment center for the column.
Wrap the Text('or follow us on') with Row() and set mainAxisAlignment.center.
Follow this code.
Padding(
padding: EdgeInsets.only(
left: 5,
top: 5,
),
child: Container(
width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'or follow us on:',
style: TextStyle(
fontFamily: "DMSans",
fontSize: 15,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
color: Colors.grey,
),
),
],
),
Container(
width: 50,
height: 30.0,
margin: EdgeInsets.only(
right: 70,
bottom: 10,
),
child: buildIcons(),
)
],
),
),
),
Scaffold(
body: Container(
child: Row(
children: [
// text container
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('or follow us on:'),
],
),
),
// icon container
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.face,
color: Colors.blue,
size: 30,
),
Icon(
Icons.transfer_within_a_station_rounded,
color: Colors.blue,
size: 30,
)
],
),
],
),
)
],
),
),
)
check below code
Container(
child: Column(
children: [
// text container
Container(
alignment: Alignment.centerLeft,
child: Text('or follow us on:'),
),
// icon container
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.face,
color: Colors.blue,
size: 30,
),
Icon(
Icons.transfer_within_a_station_rounded,
color: Colors.blue,
size: 30,
)
],
),
)
],
),
);

I want to do the expandable list view as below in attached image. How can I achieve this type of functionality in flutter?

How can I achieve this?. I have tried customizing ExpansionTile but not able to get similar effects on expansion and collapse. Mainly the prefix icon is bigger in size and so the expandable text is not close to the date. Also, the suffix icon for expanding/collapsing not fully covered with the background color.
I am also attaching an image that I have tried. I have used https://pub.dev/packages/expandable#-readme-tab- to achieve a similar effect but no luck.
I am really stuck at this place and want any kind of help.
Your help will be appreciated.
Thanks.
Just implemented, try this:
ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ExpandableNotifier(
child: Card(
elevation: 4,
child: Expandable(
collapsed: Container(
width: MediaQuery.of(context).size.width,
height: 105,
child: ExpandableButton(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.yellow,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
),
),
),
Container(
color: Colors.yellow,
width: 30,
height: 105,
child: Icon(
Icons.keyboard_arrow_right,
color: Colors.white,
),
),
],
),
),
),
expanded: Container(
height: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10),
child: ClipOval(
child: Container(
height: 80,
width: 80,
color: Colors.purple,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welkom bij Haaer',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.bold,
),
),
Text(
'2019/06/01 11:04',
style: TextStyle(
color: Colors.grey,
fontSize: 12.0,
),
),
Text(
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla'
'blablablablablablablablablablablablablablablablablablablablablabla',
softWrap: true,
),
SizedBox(
height: 5,
),
Container(
width: 80,
height: 20,
child: RaisedButton(
padding: EdgeInsets.all(0),
color: Colors.purple,
child: Text('show'),
onPressed: () {},
),
),
],
),
),
),
ExpandableButton(
child: Container(
color: Colors.purple,
width: 30,
height: 200,
child: Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
),
),
),
],
),
),
),
),
);
},
),

How to structure table data within Flutter

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

Flutter text is not ellipsized in the list

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