I have a ListBody which has a Text element and then a String which is returned by an API.
Such as..
Destination: $destination
Destination: London
However, if it is longer is spills over as such
Destination: London Paddington
Station
How is best to ensure that if the text is long enough to require a new line it is indented with the beginning on the String (i.e. The 'L' in 'London' is in-line)
Destination: London Paddington
Station
ListBody(
children: <Widget>[
RichText (
text: TextSpan(
children: <TextSpan> [
TextSpan(text: "\t\tDestination ", style: TextStyle(
fontSize: 18 ,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans'
)
),
TextSpan(text: "$destination",
style: TextStyle(
fontSize: 18 ,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans'
)
),
Thank you
Why did you use a RichText ?
If it was only to render the "$destination" value in bold, it's a little bit overkill, and the following solution may be easier to implement.
Column(
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Destination",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans'),
),
Flexible(
child: Padding(
padding: EdgeInsets.only(left: 12.0),
child: Text(
"London Paddington Station",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans'),
),
),
),
],
),
],
)
And the rendering will look like this
The most straightforward way is simply to display the text as a row of two elements, with crossAxisAlignment: CrossAxisAlignment.start
Like so:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Destination: ',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w400,
color: Color(0xff2F2F2F),
fontFamily: 'DMSans',
),
),
Expanded(
child: Text(
'London Paddington Station',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.black,
fontFamily: 'DMSans',
),
),
),
],
),
Note that it's important to wrap the long text in an Expanded widget - Otherwise, the text will simply overflow past the edge of the widget, rather than wrapping.
You can see a working example here: https://dartpad.dev/?id=80d0a8514577a65874c0e0ff7f2cb79c
Related
I think the best way to explain my issue is with images, so this is what I want to achieve, dont mind the styling of either image.
But when I try to implement it myself, the bottom text gets indented.
Here are my code. Note I am new to flutter, so tips are also appreciated.
SizedBox(
width: 580,
height: 95,
child: Material(
color: panelBackground,
borderRadius: BorderRadius.circular(5),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 5),
RichText(
text: const TextSpan(
text: "Made by: ",
style: TextStyle(
fontSize: 14,
color: Color(0xFF838383),
),
children: [
TextSpan(
text: '/',
style: TextStyle(
color: Colors.amber,
fontWeight: FontWeight.bold)),
TextSpan(
text: '6u5t4v',
style: TextStyle(
color: Colors.amberAccent,
letterSpacing: 2,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic))
])),
],
),
Column(
children: [Text("rating here")],
),
const SidebarIcon(
icon: Icon(Icons.save),
)
],
),
),
),
),
Just set crossAxisAlignment to start
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Project Name",
style: TextStyle(
fontSize: 36,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
you have to warp Text with Align Widget and given following code
Align(alignment:Alignment.topLeft, child:"your Widget")
My code prints device characteristics. But if the text is too long, then the text is displayed ugly(as in the photo 1). I tried to fix it in different ways, but only title changes for me, trailing remains unchanged.
Can it be done in this way, if the text is long, then title is displayed in one line, and the next trailing (as in the photo 2)?
body: SingleChildScrollView(
child: Align(
alignment: Alignment.topCenter,
child: Column(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 800),
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(5.0),
),
child: Card(
child: Column(
children: [
ListTile(
title: const Text('Brand:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.brand} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Operation system:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.operation_system} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
ListTile(
title: const Text('Version of OS:', style: TextStyle(fontWeight: FontWeight.w400, fontSize: 25)),
trailing: Text('${device.version_OS} ', style: const TextStyle(fontWeight: FontWeight.w400, fontSize: 20 ))),
const Divider(color: Colors.black, endIndent: 10, indent: 10),
],
),
),
),
]
)
)
)
One option would be to remove trailing from ListTile and use RichText and TextSpan for title like so:
ListTile(
title: RichText(
text: TextSpan(
style: Theme.of(context).textTheme.headline6,
children: [
const TextSpan(
text: 'Version of OS: ',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 25,
),
),
TextSpan(
text: '${device.version_OS}',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
),
),
],
),
),
),
Try below code hope its helpful to you.
Card(
child: ListTile(
leading: Text(
'Version of OS',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
overflow:TextOverflow.ellipsis,
),),
title: Text('Your version with version 1.0'),
trailing: Text('Nokia'),
),
),
I have a ListView of items. I want to put a name on the left and a value on the right. unable to figure out a way to do this so that they're both aligned to the edge:
...
ListView(
shrinkWrap: true,
padding: EdgeInsets.all(15.0),
children: <Widget>[
Text(
'Asset 0 <- -> Balance',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
Text(
'Asset 1 <- -> Balance',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
Text(
'Asset 2 <- -> Balance',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
]
),
...
(I want the balance on the right and the asset name on the left)
Is there, perhaps a special widget just for this purpose? I want it to be scrollable like a ListView and I want it to scroll together of course. It'd be cool if the row had an alignment option called edges that aligns two items in the row to each side respectively. but I don't think that exists. What's the common solution for this issue?
use this:
row(
children:[
mainAxisAlignment:MainAxisAlignment.spaceBetween;
Text(
'Asset 0',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
Text(
'Balance',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
]
)
An alternative approach to do the same when the Row is with multiple widgets is to add Spacer() between the Row children
Sample Code
Row(children: [
Text(
'Asset 0',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
Spacer(),
Text(
'Balance',
style: TextStyle(
fontSize: 18.0,
color: Colors.grey[850],
),
),
])
I want to set a black heart between "m" and "ms". and also I want to use "TextAlign.justify". if I use "TextAlign.center" then it's working fine. but if I use "TextAlign.justify" so the black heart is not set in the correct place. If I remove the "WidgetSpan" widget and add "TextSpan" for a black heart so also it's working. but I want to add bottom padding.
Please guys help me.
Thanks
Text.rich(
TextSpan(
children: <InlineSpan>[
TextSpan(
text: MyString.txtAboutUs ,
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_regular)),
TextSpan(
text: " m",
children: <InlineSpan>[
WidgetSpan(
baseline: TextBaseline.ideographic,
alignment: PlaceholderAlignment.top,
child: Container(
padding: EdgeInsets.only(bottom: 3),
child: Text("🖤", style: TextStyle(
fontSize: FontSize.size8,
fontFamily: MyFont.poppins_regular) ),
)
),
TextSpan(
text: "ms ",
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_medium,
color: Colors.black,
fontWeight: FontWeight.bold)),
],
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_medium,
color: Colors.black,
fontWeight: FontWeight.bold)),
TextSpan(
text: MyString.txtAboutImmediately,
style: TextStyle(
fontSize: FontSize.size14,
fontFamily: MyFont.poppins_regular)),
],
),
textAlign: TextAlign.justify,
),
Try to below simple Text Widget
Text('you add 🖤 here'),
// OR
Text('you add \u{2764} here} '),
Updated Answer using RichText
Center(
child: Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(
text: 'You add ',
style: TextStyle(
fontSize: 10.0,
color: Colors.black,
),
),
TextSpan(
text: '🖤',
),
TextSpan(
text: 'Here',
),
],
),
textAlign: TextAlign.center,
style: TextStyle(fontSize: 10.0,),
),
),
Screen like
replace padding with transform.
WidgetSpan(
baseline: TextBaseline.ideographic,
alignment: PlaceholderAlignment.top,
child: Container(
transform: Matrix4.translationValues(0, -3, 0),
margin: EdgeInsets.only(bottom: 8),
child: Text(
"🖤",
style: TextStyle(
// fontSize: FontSize.size8,
// fontFamily: MyFont.poppins_regular,
),
),
),
),
I am trying to make a widget that may have some long text that I would want to wrap a few lines.
I am trying to use the "Flexible" widget to wrap my Text but it is still overflowing and I do not know what is going wrong.
Here is what is happening:
Here is my code for the Columns which will be relevant to the Text:
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
And in case it is relevant, here is the whole widget:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Material(
color: Colors.transparent,
child: Container(
height: 100.0,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
],
),
),
),
),
);
}
You can use Expanded Here. Expanded, which forces the child to expand to fill the available space. you can expand column here.
Here is code snippet for column:-
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
)
Here is what you expect:-
Hope it will work.
You need to put the Container to Expanded inside Row widget
Like this
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Icon(
Icons.cake,
size: 60.0,
),
),
Expanded(child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Title text',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'This is lower text',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Flexible(
child: Text(
'Here is some long text that I am expecting will go off of the screen.',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black),
),
)
],
),
),
) ],
),
The problem is if you didn't put the Container into Expanded, the Row widget keeps expand itself to horizontal and it would overflow.
you can try this approach by placing the width of the container to 70% and for an image 30%. There is no need for Flexible widget over here
Container(
width:MediaQuery.of(context).size.width*0.7
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.w200,
fontSize: 16.0,
color: Colors.black),
),
Text(
'Here is some long text that I am expecting will go off of the screen.',
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 16.0,
color: Colors.black
)
],
),
),