How to display my text on multiple lines?

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

also tried I updated a picture so you can see how it then looks — , May 06 '21 at 22:36
if you want the first Text on top of the other you need to wrap in a column not in a row. — Jorge Vieira, May 06 '21 at 22:38
No i wankt it exactly like it looks one the second picture just this text comment.data()['comment' should be multiple lines to dont get the render flex — , May 06 '21 at 22:40
Oh sorry, you right, i did not understand correctly the logic you want. — Jorge Vieira, May 06 '21 at 22:49
Does this answer your question? [Flutter Multiline for text](https://stackoverflow.com/questions/53811932/flutter-multiline-for-text) — Zohaib Tariq, May 06 '21 at 22:51
Actually not I updated my question again probably now its clear — , May 06 '21 at 23:00

score 1 · Accepted Answer · answered May 06 '21 at 23:14

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

score 1 · Answer 2 · answered Jan 26 '23 at 11:36

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

score 0 · Answer 3 · answered May 06 '21 at 22:26

0

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

answered May 06 '21 at 22:26

Ademola Babs

31
3

score 0 · Answer 4 · answered May 06 '21 at 23:20

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

score 0 · Answer 5 · answered May 07 '21 at 04:08

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

How to display my text on multiple lines?

5 Answers5