i want let the text wrap the hot tag，how i am to do？
type 1: not align
type 2: not in one line
type 3: very close but did not set padding and margin , i didn't find some lineHeight property etc。
var Infomation = Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
color: Colors.redAccent,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
margin: EdgeInsets.only(right: 10),
child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
),
Expanded(child: Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis))
],
),
Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.start,
children: <Widget>[
Container(
color: Colors.redAccent,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
margin: EdgeInsets.only(right: 10),
child: Text("hot", style: TextStyle(color: Colors.white, fontSize: 20)),
),
Text("Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life", textScaleFactor: 1.5, maxLines: 2, overflow: TextOverflow.ellipsis)
],
),
RichText(
textAlign: TextAlign.start,
text: TextSpan(
text: "hot",
style: TextStyle(color: Colors.white, backgroundColor: Colors.red, fontSize: 24) ,
children: [
TextSpan(
text: "Ecuador imports an immortal red rose and two-color immortal embroidery ball all its life",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white,
fontSize: 18,
)
)
]
),
maxLines: 2
)
],
);
the screenshot is in here https://i.stack.imgur.com/5MpHV.png
I don't seem to have enough prestige to use pictures.
Related
I have a CircularPercentIndicator with a Text under it.
It looks like this
I want the CircularPercentIndicator to overlap into Area 1, how do I do this?
My code
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularPercentIndicator(
radius: 20.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
progressColor: Colors.red,
),
// Padding(
// padding:
// EdgeInsets.symmetric(horizontal: 10.0),
// child: Text("Area 1"),
// ),
Padding(
padding: EdgeInsets.only(),
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
backgroundColor: Colors.black),
),
)
],
),
using a Stack
Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 12),
child: Container(
//The Container here to fill the CircularPercentIndicator with color grey, tried using "fillColor" property and it filled it as a square
decoration: BoxDecoration(borderRadius: BorderRadius.circular(35),color: Colors.grey),
child: CircularPercentIndicator(
backgroundColor: Colors.black,
radius: 35.0,
lineWidth: 2.0,
percent: 0.10,
center: Text(
"10%",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
),
),
// progressColor: Colors.red,
),
),
),
Positioned(
bottom: 1,
child: Container(
color: Colors.black,
//Width is as twice as radious(Dia of the indicator) as in example image
width: 70,
height: 30,
child: Center(
child: Text(
"Area 1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[400],
),
),
),
),
),
],
),
good morning/afternoon or evening to everyone. I have a doubt about how do I suppose to align the text in my app? Here is the image:
image
See the problem? I want to bring the second line onwards to where the word "Description" or "Descrição" are. I tried to replace the Row widget for Column but didn't work, nothing appeared on my screen.
Also my code below:
Padding(
padding: const EdgeInsets.only(left: 15, right: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Descrição :",
style: TextStyle(
fontSize: 16,
height: 1.5,
color: Colors.green.shade400),
),
SizedBox(
width: 5,
),
Flexible(
child: Text(
widget.description,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 16,
height: 1.5,
color: Colors.green.shade600),
),
),
SizedBox(
height: 10,
),
],
),
Instead of Row, you should use RichText
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Describe :',
style: TextStyle(fontSize: 16, height: 1.5, color: Colors.green.shade400),
),
TextSpan(
text: widget.description,
style: TextStyle(fontSize: 16, height: 1.5, color: Colors.green.shade600),
)
],
),
)
I'm trying to align several a text which is in rows (a number, a small padding, followed by said text) in a column and don't know how to achieve it.
I already tried out every MainAxisAlignment setting in the rows property.
This screenshot should clarify my issue: The left part is the mockup and how it's supposed to look like, right-hand side is the current state in flutter.
I want the text to be aligned at the green line that I added to visualize my problem (so the first text needs to start a bit more to the right).
My code:
Widget singleStep(BuildContext context, int numToPrint, String text,
{String fineprint = ""}) {
return Padding(
padding: EdgeInsets.only(
bottom: 0.023 * getScreenHeight(context),
left: 0.037 * getScreenWidth(context)),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: "#",
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE,
color: GoZeroColors.green)),
TextSpan(
text: numToPrint.toString(),
style: GoZeroTextStyles.regular(_NUMBERFONTSIZE))
])),
Padding(
padding: EdgeInsets.only(left: 0.017 * getScreenWidth(context)),
child: RichText(
text: TextSpan(
style: GoZeroTextStyles.regular(_TEXTSIZE),
children: <TextSpan>[
TextSpan(text: text + "\n"),
TextSpan(
text: fineprint,
style: GoZeroTextStyles.regular(_FINEPRINTSIZE))
])))
],
));
}
All steps are wrapped in a column, which is a child of a Stack.
Advice is gladly appreciated. Also if you got any other advice to improve the code, feel free to leave a comment :)
Thank you in advance!
Cheers,
David
I hope I understand you well. There are some advices for your problem to solve it:
Consider to add SizedBox(width:20.0) before RichText widgets to achieve the align in mockup.
Looks like you want to make all Text widgets centered. Consider to add center widget so they align themselves at the center of column or row.
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(children: [
Expanded(
flex: 4,
child: Container(
alignment:Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey, width: 1.0)),
child:Text('I\'m in Circle',textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)))),
SizedBox(height: 15),
Text('Title',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 19,
fontWeight: FontWeight.bold,
color: Colors.black)),
SizedBox(height: 10),
Expanded(
flex: 3,
//Use listview instead of column if there are more items....
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: [
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#1',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#2',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
]),
Row(
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 15),
child: Text('#3',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green)),
),
Text('Your text goes here.......\nSecond line',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.black)),
])
]))
]));
}
My suggestion would be to return Container instead of Padding from the Widget singleStep and use the property padding of the container to set the padding.
Screenshot
Below is a very basic code snippet using Container using which I could add padding to the left of texts:
void main() {
runApp(
MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
body: Container(
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.only(
left: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
Text(
"Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 20.0,
),
),
],
),
),
),
),
),
);
}
Hope this is helpful.
Layout is defined as follows:
var cardLayout = Flexible(
child: new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
child: Row(children: <Widget>[
Text(categoryIcon,style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal)),
Text(" " + categoryName, maxLines: 3, style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)) //Overflow!!
]),
padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
),
Padding(
child: Text(title, maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16)),
padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
),
Padding(
child: new Text(address, style: TextStyle(fontStyle: FontStyle.normal)),
padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
),
Visibility(
child: Padding(
child: new Text("⬤ " + statusName, style: TextStyle(fontStyle: FontStyle.normal,color:HexColor(statusColor))),
padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
),
visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT|| type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
)
],
),
)
);
I don't understand why category label is not multiline. It overflows (I added comment in pasted code to show wchich label I mean). It seems problem is Row. How to keep Row, but make label multiline?
Simpy Wrap Text widget with - Flexible to make it Multi-line.
Flexible(
child: Text(" " + categoryName,
maxLines: 3,
style: TextStyle(
color: Colors.lightBlue,
fontWeight: FontWeight.normal)),
),
As the picture shows:
There is a solid line between the two Text(Pokémon, 11.25 AM). What I want is the length of the line equaling to the longest Text length. But the line behaved like match_parent.
In Android Native we can use a vertical LinearLayout, and set android:layout_width="wrap_content" limit in horizontal.
In Flutter we can only set Column mainAxisSize: MainAxisSize.min limit in vertical.
I guess the problem is due to Divider. When Divider is gone, the Column's width is wrap_content.
Experiment is as follows:
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
You can use - IntrinsicWidth widget. Wrap Column with it.
Container(
color: Colors.red,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
padding: EdgeInsets.all(4.0),
child: Text(
'Pokémon',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
Divider(
height: 2.0,
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Text(
'11.25 AM',
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
fontWeight: FontWeight.bold),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),