How do I handle this Text widget in Flutter? - flutter

Question

I have a function that returns an AlertDialog. Here's a screenshot of what it looks like: https://i.stack.imgur.com/ZPVFI.jpg. And here's the code for it:
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
],
),
Container(
//width: 100,
child: Text(
details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
)
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
The rows containing "Data" and "Tipologia" are no issue. But after "Descrizione" there's a Text widget that contains a string of variable length. I'd like said text to be displayed on multiple lines, starting right after "Descrizione: " (just like "pratico" starts right after "Tipologia: "). How do I do it?
Edit: here's how it looks like now https://i.stack.imgur.com/fKajB.jpg

Answer 1

I'd suggest you go with RichText() instead of Row() with Texts
Just Like What follows
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
),
so your code should look like
void _showDialog(BuildContext context, List details) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
titlePadding: const EdgeInsets.all(5),
contentPadding: const EdgeInsets.only(left: 10, right: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
details[3].toString(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 40)
),
]
),
content: Container(
color: Colors.green,
width: double.infinity,
height: 150,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Data: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[0],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
Row(
children: <Widget>[
Text(
'Tipologia: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
),
Text(
details[2].toLowerCase(),
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20)
),
],
),
details[5] != ''
? Column(
children: <Widget>[
RichText(
textAlign: TextAlign.left,
text: TextSpan(
children: [
TextSpan(children: [
TextSpan(
text: 'Descrizione: ',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),),
TextSpan(
text: details[5],
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20),
),
]),
],
)
: Offstage(
child: Text('invisible')
),
Row(
children: <Widget>[
details[4] == 'SI'
? Text(
'Il voto fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
: Text(
'Il voto non fa media.',
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold)
)
],
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text(
"Chiudi",
style: test.GoogleFonts.quicksand(color: Colors.black, fontSize: 15)
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

Answer 2

All you have to do is make a couple simple changes to your code
details[5] != ''
? Container(
width: double.infinity,
child: Row(
crossAxisAlignment: CrossAxisAlignment
.start, // This will change how the multi-line text is aligned
children: <Widget>[
Text(
'Descrizione: ',
style: test.GoogleFonts.quicksand(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Flexible(
child: Text(
details[5],
style: test.GoogleFonts.quicksand(
color: Colors.black, fontSize: 20),
overflow: TextOverflow.ellipsis,
maxLines: 5,
textAlign: TextAlign.justify,
),
),
],
),
)
: Offstage(child: Text('invisible')),
Let me know if you need anything else