CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
user15761140
user15761140

Reputation:

How to display my text on multiple lines?

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:

enter image description here

When I wrapped second text with expanded it looks like that

I want something like this

enter image description here

Upvotes: 3

Views: 5607

Answers (5)

Psalms Kalu
Psalms Kalu

Reputation: 115

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

Upvotes: 2

LihnNguyen
LihnNguyen

Reputation: 865

I use this way.

https://i.sstatic.net/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,
            ),
          ),
        ],
      ),
      ),
    );
  }
}

Upvotes: 0

Victor Eronmosele
Victor Eronmosele

Reputation: 7696

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

Upvotes: 0

Jorge Vieira
Jorge Vieira

Reputation: 3062

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

Upvotes: 1

Ademola Fadumo
Ademola Fadumo

Reputation: 111

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

Upvotes: 0

Related Questions