Reputation: 91
For below widget how to optimise Text() widget further when there is longer text included TextOverflow.ellipsis is not working for it.There is combination Column,Row,Listview in my code.How should I optimise text for longer text I have tried using Expanded,Flexible,FittedBox but getting confused how and when to use it.
Widget builddoc(Document doc) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DocumentsDetails(doc.docId, this.userName)));
},
child: Padding(
padding: const EdgeInsets.all(6),
child: Container(
height: MediaQuery.of(context).size.height * 0.09,
width: MediaQuery.of(context).size.width * 2,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
side: BorderSide(
color: Color.fromARGB(255, 253, 153, 33),
)),
borderOnForeground: true,
color: Colors.white,
elevation: 5,
child: ListView(
physics: NeverScrollableScrollPhysics(),
children: [
Padding(
padding: const EdgeInsets.all(5),
child: Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
Icons.file_copy_rounded,
color: Color.fromARGB(255, 253, 153, 33),
size: 20,
),
Padding(
padding: const EdgeInsets.all(7),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${doc.docTitle}',
style: TextStyle(
color: Color.fromARGB(255, 253, 153, 33),
fontSize:
(SizeConfig.screenWidth ?? 0) * 0.033,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
'${doc.tokenNo}',
style: TextStyle(
color:
Color.fromARGB(255, 253, 153, 33),
fontSize: 1.5 *
MediaQuery.of(context).size.height *
0.01),
)
],
),
],
),
),
Expanded(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.3,
)),
AutoSizeText('${doc.docStatus}',
style: TextStyle(
color: Color.fromARGB(255, 253, 153, 33),
fontSize: 1.5 *
MediaQuery.of(context).size.height *
0.01)),
Icon(
Icons.arrow_right_sharp,
color: Color.fromARGB(255, 253, 153, 33),
size: 25,
)
],
),
),
)
],
),
),
),
),
);
Upvotes: 0
Views: 244
Reputation: 21
You should use Expanded or Flexible widget for see all text or you can try Maxlines and textOverFlow in Text Widget.
Upvotes: 1