[英]How to align the icon left and text middle in a Raised button in flutter?
[英]Button with icon and text position left
我使用 flutter 做带有图标的RaisedButton
以及我想要将 position 更改为左侧的图标和文本。 怎么做? 这是我的按钮代码。
我想像图片中那样做:
Card(
child: SizedBox(
width: double.infinity,
height: 60,
child: RaisedButton.icon(
icon: Icon(Icons.home,
size: 40, color: Theme.of(context).primaryColor),
color: Colors.white,
textColor: Theme.of(context).primaryColor,
label: const Text('Electrical and Wiring',
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 15)),
onPressed: () => {},
),
),
),
在 Raised Button 小部件中,您可以将Row()
或Column()
作为child
,因此可以像这样轻松完成,
RaisedButton(
child: Row(
children: <Widget>[
Icon(Icons.call),
Text('Your Text'),
],
),
onPressed: (){
//Actions
}),
您可以使用RaisedButton.icon()
小部件来实现这一点。
您可以从文档中获得更多信息。
这是给你的一个最小的例子..
RaisedButton.icon(onPressed: null, icon: null, label: null);
尝试这个
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Card(
child: SizedBox(
width: double.infinity,
height: 60,
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Icon(Icons.home,
size: 40, color: Theme.of(context).primaryColor),
),
Text('Electrical and Wiring',
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 15)),
],
)),
),
),
您可以做什么,您可以使用带有TextButton.icon()
的 flutter 中的方向性小部件。 这是代码。
Directionality(
textDirection: TextDirection.rtl,
child: TextButton.icon(
onPressed: null,
icon: Icon(
CupertinoIcons.ellipsis_circle_fill,
color: Colors.green,
),
label: Text(
"Business Name",
style: Theme.of(context).textTheme.subtitle1,
),
),
),
这是视图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.