Flutter中FloatingActionButton设置渐变
2021-04-01 本文已影响0人
_compass
FloatingActionButton背景设置的时候,需要自定义背景,可在child中实现,示例如下:
floatingActionButton: FloatingActionButton(
child: Container(
width: 60,
height: 60,
child: Icon(Icons.add),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
const Color(0xFFdd3b38),
const Color(0xFFee7a40),
]
),
),
onPressed: () {},
)
效果如下:

如果需要设置背景图,在BoxDecoration里使用DecorationImage即可,示例如下:
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Container(
width: 60,
height: 60,
child: Icon(
Icons.add,
color: Colors.white,
),
decoration: BoxDecoration(
image: new DecorationImage(
image: new ExactAssetImage('assets/images/ali.jpeg'),
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
),
效果如下:

以上。