+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: Flutter- wrapping text (/Thread-Flutter-wrapping-text)
Flutter- wrapping text - riordanllunruv - 07-21-2023
I want wrap text as text grows. I searched through and tried wrap with almost everything but still text stays one line and overflows from the screen.
Does anyone know how to achieve this?
Any help is highly appreciated!
Positioned(
left: position.dx,
top: position.dy,
child: new Draggable(
data: widget.index,
onDragStarted: widget.setDragging,
onDraggableCanceled: (velocity, offset) {
setState(() {
position = offset;
widget.secondCallback(offset, widget.index);
widget.endDragging();
});
},
child: new GestureDetector(
onTap: () {
widget.callback(widget.caption, widget.index);
},
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize,
),
),
),
feedback: new Material(
type: MaterialType.transparency,
child: new Text(
widget.caption.caption,
style: new TextStyle(
color: widget.caption.color,
fontSize: widget.caption.fontSize),
softWrap: true,
),
),
));
RE: Flutter- wrapping text - donellejyyrxtkd - 07-21-2023
In a project of mine I wrap `Text` instances around `Container`s. This particular code sample features two stacked Text objects.
Here's a code sample.
//80% of screen width
double c_width = MediaQuery.of(context).size.width*0.8;
return new Container (
padding: const EdgeInsets.all(16.0),
width: c_width,
child: new Column (
children: <Widget>[
new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
],
),
);
[edit] Added a width constraint to the container
RE: Flutter- wrapping text - dolleyyvnzbdc - 07-21-2023
Use Expanded
Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(_name, style: Theme.of(context).textTheme.subhead),
new Container(
margin: const EdgeInsets.only(top: 5.0),
child: new Text(text),
),
],
),
RE: Flutter- wrapping text - almaraz254 - 07-21-2023
You can use Flexible, in this case the **person.name** could be a long name (Labels and BlankSpace are custom classes that return widgets) :
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Flexible(
child: Labels.getTitle_2(person.name,
color: StyleColors.COLOR_BLACK)),
BlankSpace.column(3),
Labels.getTitle_1(person.likes())
]),
BlankSpace.row(3),
Labels.getTitle_2(person.shortDescription),
],
)
RE: Flutter- wrapping text - packetized81409 - 07-21-2023
If it's a single text widget that you want to wrap, you can either use **Flexible** or **Expanded** widgets.
Expanded(
child: Text('Some lengthy text for testing'),
)
or
Flexible(
child: Text('Some lengthy text for testing'),
)
For multiple widgets, you may choose **Wrap** widget. For further details checkout [this][1]
[1]:
RE: Flutter- wrapping text - uninspirited932779 - 07-21-2023
You Can Wrap your widget with Flexible Widget and than you can set property of Text using overflow property of Text Widget.
you have to set TextOverflow.**clip**
for example:-
Flexible
(child: new Text("This is Dummy Long Text",
style: TextStyle(
fontFamily: "Roboto",
color: Colors.black,
fontSize: 10.0,
fontWeight: FontWeight.bold),
overflow: TextOverflow.clip,),)
hope this help someone :)
RE: Flutter- wrapping text - bedbugswph - 07-21-2023
***Using Ellipsis***
Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),
[![enter image description here][1]][1]
----------
***Using Fade***
Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
[![enter image description here][2]][2]
----------
***Using Clip***
Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),
[![enter image description here][3]][3]
----------
**Note:**
If you are using `Text` inside a `Row`, you can put above `Text` inside `Expanded` like:
Expanded(
child: AboveText(),
)
[1]:
[2]:
[3]:
RE: Flutter- wrapping text - meting10502 - 07-21-2023
Try `Wrap` widget to wrap text as text grows:
**Example:**
```dart
Wrap(
direction: Axis.vertical, //Vertical || Horizontal
children: <Widget>[
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
],
),
RE: Flutter- wrapping text - Mradvertizingor - 07-21-2023
Container(
color: Color.fromRGBO(224, 251, 253, 1.0),
child: ListTile(
dense: true,
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
textAlign: TextAlign.left,
softWrap: true,
text: TextSpan(children: <TextSpan>
[
TextSpan(text: "hello: ",
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold)),
TextSpan(text: "I hope this helps",
style: TextStyle(color: Colors.black)),
]
),
),
],
),
),
),
RE: Flutter- wrapping text - deployers488691 - 07-21-2023
The `Flexible` does the trick
new Container(
child: Row(
children: <Widget>[
Flexible(
child: new Text("A looooooooooooooooooong text"))
],
));
This is the official doc
[To see links please register here]
on how to arrange widgets.Remember that `Flexible` and also `Expanded`, should only be used within a `Column`, `Row` or `Flex`, because of the `Incorrect use of ParentDataWidget`.
The solution is not the mere `Flexible`