Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
99 views
in Technique[技术] by (71.8m points)

android - Flutter Multiline for text

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,

      Align( alignment: Alignment.bottomCenter,
      child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(20.0),
            child: new Text(
              "This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
              maxLines: 2,
            ),
          )
        ],
      ),
    )
question from:https://stackoverflow.com/questions/53811932/flutter-multiline-for-text

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Short answer

All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:

Container(
    width: 150,
    child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    ),
),

Long answer

Minimal working example + explanation:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
        body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
          children: [
            Container( 
              width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
              child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
                child: Text(
                  "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Extra

You also mentioned maxlines. This property limits the maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.

Container(
  width: 100,
  child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
),

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...