问题描述
我想知道我们如何制作一个App Bar动作按钮,就像图片中的那个一样。在背景上添加背景或将小部件包装在图标上似乎无法实现下图中按钮的外观。
解决方法
我演示了您要实现的目标:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,title: Text(
'Title',),centerTitle: true,actions: [
// squared button/icon
Padding(
padding: const EdgeInsets.only(right: 20.0,top: 10.0,bottom: 10.0),child: Container(
width: 35,decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),color: Colors.white.withOpacity(0.5),child: Center(
child: Icon(
Icons.settings,color: Colors.white,],body: .... YOUR WIDGETS ...
结果:
,您可以在Icon
和Container
相等的width
内使用heigth
(这样就可以得到一个正方形),然后可以用{{1} }以获得这种效果。
当然,您应该使用容器的color属性填充背景。