如何在颤动中正确地将图像放入圆形按钮中？

Question

我添加的图像不适合圆形。 This为参考图片

这是参考代码

      Container(
      child:Material(
        shape: CircleBorder(),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: InkWell(
          splashColor: Colors.black26,
          onTap: (){},
          child: Ink.image(
            image: AssetImage('assets/'+ Name),
            height: 60 ,
            width: 60,
          ),
        ),
      )
    ),Text(String),

Answer 1

我想你可以使用 CircleAvatar

这里是演示代码

CircleAvatar(
                radius: 20.0,
                child: ClipOval(
                    child: Image.network(
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0sCAvrW1yFi0UYMgTZb113I0SwtW0dpby8Q&usqp=CAU')),
              ),

虽然我无法打开您的示例图片，但我想如果您使用 Circle Avatar 就可以了

Answer 2

使用适合属性的 Ink.child

第一种方式：使用适合度：BoxFit.cover，用于中心裁剪图像

否则

第二种方式：使用 fit: BoxFit.fill，拉伸图像

Container(
      child:Material(
        shape: CircleBorder(),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: InkWell(
          splashColor: Colors.black26,
          onTap: (){},
          child: Ink.image(
            image: AssetImage('assets/'+ Name),
            fit: BoxFit.cover, //Add this line for center crop or use 2nd way
            height: 60 ,
            width: 60,
          ),
        ),
      )
    ),Text(String),

如何在颤动中正确地将图像放入圆形按钮中？

How to fit an image in a circle button properly in flutter?

flutter

dart

mobile-application