[英]How I can create icon at left and right in a card using Flutter/Dart
I can't figure out how to change the icon that I already highlighted to the top-right.我不知道如何更改已在右上角突出显示的图标。 I already use spceBetween
, but still doesn't affect the changes.我已经使用spceBetween
,但仍然不影响更改。
class _SidebarState extends State<Sidebar> {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Color.fromARGB(255, 44, 41, 56),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.only(topRight: const Radius.circular(20))),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Material(
shadowColor: Colors.transparent,
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.menu,
color: Color.fromARGB(255, 247, 243, 243)),
onPressed: widget.onSideBarPressed,
),
),
),
Container(
color: Colors.amber,
child: Material(
shadowColor: Colors.transparent,
color: Colors.transparent,
child: IconButton(
icon: Icon(Icons.access_time,
color: Color.fromARGB(255, 247, 243, 243)),
onPressed: widget.onSideBarPressed,
),
),
)
],
)),
Expanded(
flex: 2,
child: Text(
widget.title,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
decoration: TextDecoration.none),
),
)
],
),
Divider(
height: 0,
),
Expanded(
flex: 2,
child: Container(
child: widget.body,
),
)
],
),
);
}
}
To show an icon on the left and right, you should use the AppBar
widget on your Scaffold()
.要在左侧和右侧显示图标,您应该使用Scaffold()
上的AppBar
小部件。 To place a widget at the start (left) use the leading
property, and to place a widget at the end (right) use the actions
property:要将小部件放置在开头(左)使用leading
属性,并将小部件放置在末尾(右)使用actions
属性:
return Scaffold(
appBar: AppBar(
leading: Icon(Icons.menu),
actions: [Icon(Icons.search)],
),);
Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.