我想知道什么是最好的方法,以实现右下角的圆形图标按钮的效果。
请注意,该图标是透明的并显示图像背景。
我尝试使用Stack
小部件,但无法正确放置它,也无法获得透明的颜色。
目前我有这个:
class Banner extends StatelessWidget {
final String src;
const Banner(this.src, {Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 16 / 9,
child: Stack(children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Stack(
children: <Widget>[
Image.network(src),
LayoutBuilder(
builder: (context, constraints) {
var calculatedOverlay = constraints.maxHeight / 3;
return Align(
alignment: Alignment.bottomRight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(calculatedOverlay),
),
color: Colors.white,
),
height: calculatedOverlay,
width: calculatedOverlay,
),
);
},
),
],
),
),
Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
),
),
]),
);
}
}
这将导致以下结果:
谢谢。