Flutter: How to set variable length string inside a row? - flutter

Question

I am trying to set a string inside a row, but the length of the string is variable i.e data is fetched from API. Then it is set inside the row, but currently, as the length is greater it shows as A RenderFlex overflowed by 48 pixels on the right.
I am been trying to use expanded/flex/flexible but getting incorrect parent error. (Don't know how to as I am new to flutter)
So, please help in how to solve this problem of renderflex overflow.
Following is my method:
void confirmpayment(double amount, String description) {
final itemsSubmit = <Widget>[
Image.asset(
'images/payments.jpg',
width: MediaQuery.of(context).size.width,
fit: BoxFit.contain,
),
ListTile(
title: AutoSizeText(
'Confirmation',
style: TextStyle(fontSize: 20),
),
subtitle: AutoSizeText(
'Hey Gaurav, please confirm examination as payment once done will be irrevocable.',
style: TextStyle(color: Colors.grey),
),
// onTap: () {},
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 10),
child: AutoSizeText(
'Exam:',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
),
),
Spacer(),
CheckboxGroup(
orientation: GroupedButtonsOrientation.VERTICAL,
labelStyle: TextStyle(fontSize: 15),
labels: [
...listexam.map((location) {
return location['name']; //this is where string is set from api data
}).toList()
],
checked: _checked,
),
SizedBox(
width: 20,
),
],
),
Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Plan',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
description,
textAlign: TextAlign.right,
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 15,
),
),
),
),
SizedBox(
width: 20,
),
]),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Amount',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 16,
),
)),
Expanded(
child: Padding(
padding: EdgeInsets.only(top: 1),
child: AutoSizeText(
'Rs. ' + amount.toString(),
textDirection: TextDirection.ltr,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 15,
// fontWeight: FontWeight.w500,
),
),
),
),
SizedBox(
width: 20,
),
]),
SizedBox(
height: 40,
),
Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[
RaisedButton(
elevation: 1,
// onPressed: _showSheetSubmit,
color: Colors.grey[200],
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
side: BorderSide(color: Colors.grey[200])),
onPressed: null,
child: AutoSizeText(
"Cancel",
style: TextStyle(
fontSize: 16,
// fontFamily: 'lato',
letterSpacing: 1,
color: Colors.white,
),
)),
RaisedButton(
elevation: 1,
color: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(28.0),
side: BorderSide(color: Colors.green)),
onPressed: () {
openCheckout(amount, description);
},
child: AutoSizeText(
"Buy",
style: TextStyle(
fontSize: 16,
// fontFamily: 'lato',
color: Colors.white,
letterSpacing: 1),
)),
]),
SizedBox(
height: MediaQuery.of(context).size.height / 12,
),
];
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
backgroundColor: Colors.white,
context: context,
builder: (BuildContext _) {
return Container(
// color: Colors.white,
child: Wrap(
children: itemsSubmit,
),
);
},
isScrollControlled: true,
// isDismissible: true
);
}
Following is the mock:

Answer 1

Instead of trying to trim the String data that will go into the Text widget, I would use a LayoutBuilder to get the available space that the Row widget could occupy. Then, I would wrap the Text in a SizedBox to limit the maximum width of the Text widget. Finally, I would set the overflow property of the Text widget, so that it shows an ellipsis when the text is longer than the available space.
Here is a little app I wrote for you to see how to do this. You can run it on DartPad to play around with it.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
LayoutBuilder(
builder: (context, constraints) {
return Row(
children: <Widget>[
SizedBox(
width: constraints.maxWidth,
child: Text(
'This is a very very long text that might overflow the available rendering space',
overflow: TextOverflow.ellipsis,
),
),
],
);
},
),
],
),
),
);
}
}