Flutter- wrapping text [duplicate] - dart

This question already has answers here:
Flutter - Wrap text on overflow, like insert ellipsis or fade
(23 answers)
Closed 3 years ago.
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,
),
),
));

The Flexible does the trick
new Container(
child: Row(
children: <Widget>[
Flexible(
child: new Text("A looooooooooooooooooong text"))
],
));
This is the official doc https://flutter.dev/docs/development/ui/layout#lay-out-multiple-widgets-vertically-and-horizontally 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

In a project of mine I wrap Text instances around Containers. 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

Using Ellipsis
Text(
"This is a long text",
overflow: TextOverflow.ellipsis,
),
Using Fade
Text(
"This is a long text",
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
Using Clip
Text(
"This is a long text",
overflow: TextOverflow.clip,
maxLines: 1,
softWrap: false,
),
Note:
If you are using Text inside a Row, you can put above Text inside Expanded like:
Expanded(
child: AboveText(),
)

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

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

Try Wrap widget to wrap text as text grows:
Example:
Wrap(
direction: Axis.vertical, //Vertical || Horizontal
children: <Widget>[
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
Text(
'Your Text',
style: TextStyle(fontSize: 30),
),
],
),

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 :)

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

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

Related

Why can't you put a children <Widget>[] in a body: Center widget?

I'm trying to create a listview widget with a floating action button on my Flutter app, but it's not working because Android Studio keeps on telling me that:
"the named parameter children isn't defined"
I basically can't put children in a body: Center widget, but I don't know why
I'm basically a beginner to Flutter and I'm still a bit confused about the basic syntax, and which widgets can hold which widgets, so any help is greatly appreciated! Thank you!
Here's my overall code that won't run due to the first error (in quotation marks above):
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[300],
title: Text(
'Welcome',
style: TextStyle(
fontSize: 25.0,
fontFamily: 'Raleway',
letterSpacing: 1.0,
),
),
centerTitle: true,
),
body: Center(
children: <Widget> [
ListView(
children: <Widget>[
Container(
height: 50,
color: Colors.green[100],
child: Text(
'Body Text',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 45.0,
letterSpacing: 1.0,
color: Colors.green[300],
),
),
),
Container(
height: 50,
color: Colors.green[100],
child: Text(
'Text'
),
),
],
),
FloatingActionButton(
onPressed: () {},
child: Text(
'+',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 35.0,
),
),
backgroundColor: Colors.green[300],
),
]
),
);
}
}
child parameter of Center Widget has a data type of Widget and so it can't take <Widget>[] as an input. It is similar to that an int won't accept String value. They are two different data types.
It seems that you want to have a list of data that is in center of the screen: For that you can use following code.
1.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // (optional) will center horizontally.
children: <Widget>[
.....
]
)
2.
Center(
child: ListView(
shrinkWrap:true;
children: <Widget>[
.....
]
)
)
It's simple. Because Center is a widget that does not take more than on widget as input.
It can only align one widget provided as a child.
For mulitple children you have to use some widget that takes a list of widgets as input.
Like:
Column
Row
ListView
Wrap
etc.
Center accepts only one widget check laytout page at https://flutter.dev/docs/development/ui/layout
Column(mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget> [
ListView(
children: <Widget>[
Container(
height: 50,
color: Colors.green[100],
child: Text(
'Body Text',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 45.0,
letterSpacing: 1.0,
color: Colors.green[300],
),
),
),
Container(
height: 50,
color: Colors.green[100],
child: Text(
'Text'
),
),
],
),
FloatingActionButton(
onPressed: () {},
child: Text(
'+',
style: TextStyle(
fontFamily: 'Raleway',
fontSize: 35.0,
),
),
backgroundColor: Colors.green[300],
),
]
),
);
Center is a widget that centres its child within itself.
So you can have only 1 child inside Center Widget.
You can take structure like,
Center(
child: Column(
children: <Widget>[
All Children you have
]
)
There are two types of widgets, one of which accepts a widget as a child and the other one accepts [Widget] as children.
Accepts a Widget as Child: Container widget, Center widget, Padding widget, , etc.
Accepts [Widget] as Children: Row widget, Column widget, Stack widget, Wrap widget, ListView widget, etc.
Center class :
A widget that centers its child within itself.
All layout widgets have either of the following:
A child property if they take a single child—
for example, Center or Container
A children property if they take a list of widgets—
for example, Row, Column, ListView, or Stack.
Add the Text widget to the Center widget:
const Center(
child: Text('Hello World'),
),

How to wrap row items in a card with flutter

I have a card that contains row of items (text and checkbox widgets). The problem is that the card can only fill up limited space each row, but it isn't going to the next line in the row. I tried using the wrap widget but it had no effect. I keep getting this:
As you can see it is not wrapping to the next but trying to fit everything in that one line. Here is my code:
Widget _buildCategories() {
return Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
Row(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping'),
],
)
],
)
],
),
));
}
Widget _checkBox(String category) {
return Expanded(
child: Column(
children: <Widget>[
Text(
'$category',
textAlign: TextAlign.center,
style: TextStyle(fontFamily: 'MonteSerrat'),
),
Checkbox(
value: false,
onChanged: (value) {
// We will update the value to the firebase data here
print('updated value to: $value');
},
)
],
));
}
I fixed your code with the following changes:
Removed Row widget inside Wrap.
Removed Expanded widget.
Add the property maxLines to your Text widget.
Widget _buildCategories() {
return Card(
margin: const EdgeInsets.only(top: 20.0),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(
'Categories',
style: TextStyle(fontFamily: 'MonteSerrat', fontSize: 16.0),
),
Wrap(
children: <Widget>[
_checkBox('Gaming'),
_checkBox('Sports'),
_checkBox('Casual'),
_checkBox('21 +'),
_checkBox('Adult'),
_checkBox('Food'),
_checkBox('Club'),
_checkBox('Activities'),
_checkBox('Shopping')
],
)
],
),
));
}
Widget _checkBox(String category) {
return Column(
children: <Widget>[
Text(
'$category',
maxLines: 1,
textAlign: TextAlign.center,
style: TextStyle(fontFamily: 'MonteSerrat'),
),
Checkbox(
value: false,
onChanged: (value) {
// We will update the value to the firebase data here
print('updated value to: $value');
},
)
],
);
}
}
Also you can add the properties runSpacing and spacing to your Wrap widget to give more space between your items in horizontal and vertical.
Wrap(
runSpacing: 5.0,
spacing: 5.0,
More info here: https://api.flutter.dev/flutter/widgets/Wrap-class.html

How do I have text and a CircleAvatar across from each other (opposite sides), just below the appbar?

Sorry guys (really new to flutter and dart) but I was wondering how I could have a CircleAvatar on the right side of the screen (below the app bar) and some text on the left side, just across from it. Thanks in advance for your help! I have pasted the code that I made for the text on the left side (below the appbar). I know its probably a super simple question to most of you guys but for me it's not because I haven't gotten to grips with dart/flutter yet.
body: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: new Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: new Text(
'My Briefing',
style:
new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
),
),
Something like this would do what you are looking for:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: Text(
'My Briefing',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
CircleAvatar(),
],
)
By the way, starting dart 2, you can drop the "new" key word at the begging of each newly created classes.

Text wrap in row widgets

I have nested rows using this code:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'the text in the first row',
),
],
),
Row(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'the text in the second row',
),
],
),
],
)
When there is space, I want the rows to be side by side (current behavior):
Currently, when it overflows, the text gets cut off like this:
Is there a way to force the second row onto a new line when there's no space, so it looks like this?
Try this! It worked for me.
new Flexible(child: new Text('Auto wrap'))
Something on these lines will work:
Wrap(
direction: Axis.horizontal,
children: <Widget>[
Wrap(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'the text ',
),
],
),
Wrap(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'more the text in the first row',
),
],
),
Wrap(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'the text in the second row',
),
],
),
Wrap(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'more text in the second row',
),
],
),
Wrap(
children: <Widget>[
Icon(Icons.fiber_manual_record),
Text(
'the text in the third row',
),
],
),
],
)
Row(
children: [
Checkbox(
onChanged: (bool value) {},
value: true,
),
Flexible(
child: RichText(
strutStyle: StrutStyle(height: 1.4),
softWrap: true,
text: TextSpan(style: TextStyle(fontSize: 12, color: ColorUtil.hexToColor("#999999")), children: <InlineSpan>[
TextSpan(text: "ฉันได้อ่านและยอมรับ "),
TextSpan(text: "ฉันได้อ่านและยอมรับ "),
TextSpan(
text: "สัญญาการให้บริการ & ข้อตกลงความเป็นส่วนตัว",
style: TextStyle(color: ColorUtil.hexToColor("#666666")),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.pushNamed(context, "/profile/terms_policy");
}),
]),
),
)
],
),
this work for me. Wrap with Flexible
If you wrapped Text widget with Padding adding Flexible around Padding do the trick.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.check,
color: Colors.green,
),
SizedBox(
width: 16,
),
Flexible(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
child: Text(
'Some text',
style: TextStyle(
fontSize: 18, color: Colors.white),
),
),
),
],
),

Adding extra padding to TextSpan background in RichText widget

I have a RichText with some TextSpan. I want one of the TextSpan widgets to have a background on it so I used background: Paint()..color = Colors.redAccent as its text style.
Is there a way to add some extra red space/padding to the background.
This is how it currently looks:
This is how I want it to look (notice the extra red on the top and bottom of the highlighted text):
This is the code used:
Scaffold(
appBar: new AppBar(),
body: new RichText(
text: new TextSpan(
text: 'This is a one the lines in the span \n ',
style: TextStyle(fontSize: 15.0, color: Colors.black),
children: <TextSpan>[
new TextSpan(
text: 'This is the second line',
style: new TextStyle(fontWeight: FontWeight.bold)),
new TextSpan(
text: ' background on me ',
style: new TextStyle(
fontWeight: FontWeight.bold,
background: Paint()..color = Colors.redAccent,
)),
new TextSpan(text: ' This is another of the lines in the span!'),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
)
I tried adding height to the text style, but it doesn't affect the height of the background.
The new solution in 2019 with flutter 1.7.8 is WidgetSpan, you could just add a Container and a Padding or any combination of widget to make more variety!
Here is an example to use on the case:
WidgetSpan(
child: Container(
color: Colors.red,
padding: EdgeInsets.all(8.0),
child: Text("background on me", style: ...),
)
)
And don't forget to change <TextSpan>[] to <InlineSpan>[], that's It!
Quite ugly solution, but I haven't found other (
TextStyle(fontWeight: FontWeight.bold,
background: Paint()..color = Colors.redAccent
..strokeWidth = 16.5
..style = PaintingStyle.stroke,)
strokeWidth have to be big enough to cover height of text. In my case 16.5 is minimal suitable value
you can use widgetSpan that inside RichText so that you can add any widget inside RichText.
RichText(
maxLines: 1,
overflow: TextOverflow.ellipsis,
text: TextSpan(
text: "text one", // text of exemple
children: [
// add a space between texts
WidgetSpan(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
),
),
TextSpan(
text: "text two", // text exemple
),
],
),
),

Resources