How to display my text on multiple lines? - firebase

Question

I'm trying to figuring out how I can show my text on multiple lines. Here's my code:
title: Row(
children: [
Text(
_snapshot.data['username'],
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w700),
),
SizedBox(width: 5.0),
Text(
"${comment.data()['comment']}",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w500),
)
],
),
But when the text is too long I get this error:
When I wrapped second text with expanded it looks like that
I want something like this

Answer 1

I think you can try use a RichText, see this code:
RichText(
text: TextSpan(
text: 'Title ', // _snapshot.data['username']
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
children: <TextSpan>[
TextSpan(//"${comment.data()['comment']}"
text: 'this is a very long text text text'
'text text text text text text text text text text'
'text text text text text text text text text',
style: TextStyle(
fontWeight: FontWeight.normal,
),
)
],
),
),

Answer 2

Using "maxLines" (Text widget) property should work, It should wrap the text.

Answer 3

This looks like a use-case for RichText because the only difference between the two Text widgets is the font-weight.
You can update your code to use this instead and add as much space as you want before ${comment.data()['comment']}:
title: RichText(
text: TextSpan(
title: _snapshot.data['username'],
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w700),
children: <TextSpan>[
TextSpan(text: " ${comment.data()['comment']}", style: TextStyle(fontWeight: FontWeight.w500)),
],
),
)

Answer 4

I use this way.
https://i.stack.imgur.com/6WrQi.png
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: ListView(
children: const <Widget>[
Card(
child: ListTile(
leading: FlutterLogo(size: 56.0),
title: Text('Two-line ListTile Two-line ListTile Two-line ListTile'),
subtitle: Text('Here is a second line'),
),
),
Card(
child: ListTile(
leading: FlutterLogo(size: 72.0),
title: Text('Three-line ListTile'),
subtitle: Text(
'A sufficiently long subtitle warrants three lines.'
),
isThreeLine: true,
),
),
],
),
),
);
}
}

Answer 5

Just add your Text widget inside a Sizedbox or Container with fixed width, and it will flow into multiline.
SizedBox(
width: 200,
child: Text("Some long text",
maxLines: 3,
style: const TextStyle(fontSize: 14, color: colorWhite))
)
You can use maxLine and overflow properties to control how much lines the text can run through, and what happens when the maximum line is exceeded