如何在颤振中将图标叠加在图像上

Question

我必须在图片的右下角显示一个最喜欢的图标。

Container(
   decoration: new BoxDecoration(color: Colors.white),
   alignment: Alignment.center,
   height: 240,
   child: Image.network(used_car.imageUrl,fit: BoxFit.fill) 
)

我想在此图像容器的右下角显示一个图标 Icon.favorite。但没有找到任何 flutter 属性来修复或显示。

Answer 1

你可以把它包装成Stack:

Stack(
  children: <Widget>[
    Container(
        decoration: new BoxDecoration(color: Colors.white),
        alignment: Alignment.center,
        height: 240,
        child: Image.network(used_car.imageUrl,fit: BoxFit.fill)
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Icon(Icons.favorite),
    )
  ],
)

Answer 2

您可以使用 Positioned 小工具做得更好..在 Stack.

Container(
   decoration: new BoxDecoration(color: Colors.white),
   height: 240,
   child: Stack(
     children: <Widget>[
        Image.network(used_car.imageUrl,fit: BoxFit.fill),
        Positioned(
          bottom: 15, right: 15, //give the values according to your requirement
          child: Icon(Icons.favorite),
        ),
     ],
  ),
),

Answer 3

还有一种图标叠加的解决方案：

Container(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius:BorderRadius.circular(100)
          ),
          child: Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
      ),
      height: MediaQuery.of(context).size.width - 220,
      width: MediaQuery.of(context).size.width - 220,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          image: DecorationImage(
            image: AssetImage(
              'assets/images/image.jpg'
            ),
            fit: BoxFit.cover
          ),
      ),
    ),
  ),

结果是：

如何在颤振中将图标叠加在图像上

How to overlay Icon on image in flutter

overlay

flutter

flutter-layout