[英]how to put string inside a circle using listTile in flutter?
i would like to have a circle in which i can put centered text using ListTile widget?我想要一个圆圈,我可以使用 ListTile 小部件在其中放置居中的文本? what i done is below:
我所做的如下:
ListTile(
leading: new CircleAvatar(
backgroundColor: color2,
child: new Text(
letter,
style: TextStyle(
color: color,
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
)),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style:
TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
),
and the result:结果:
as you can see, the string is not centered vertically and i would like the do that conserving the same design.如您所见,字符串不是垂直居中的,我希望这样做以保留相同的设计。 i precise, the arrow inside the circle is not an icon, but a string type variable.
我准确地说,圆圈内的箭头不是图标,而是字符串类型的变量。
You can use a container with Circle shape, and inside that, please center the text like below code:您可以使用具有圆形形状的容器,并在其中将文本居中,如下面的代码:
Container(
width: 60,
height: 60,
child: Center(child: Text("Your text"),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1)),
)
I have edited you code so please try this and let me know.我已经编辑了你的代码,所以请试试这个并告诉我。
ListTile(
leading: Container(
height: 50,
width: 50,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: Text(
'Text',
style: TextStyle(fontSize: 17),
),
),
),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
);
I hope it's work我希望它的工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.