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

Question

我添加的图像与圆形形状不合适。 这个是参考图

这是参考代码

      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

使用 Ink.child 的 fit 属性

第一种方法：使用 fit: 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),

Answer 2

我想你可以使用 圆形头像

这是演示代码

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

虽然我无法打开你的示例图像，但我想如果你使用圆形头像它会工作

Answer 3

这就是方法。 图像将无法在圆中心正确裁剪和调整。

  Container(
              height: 80,
            width: 80,
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blue,width: 2),
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: Image.asset('assets/yourImagepath',fit: BoxFit.contain,)),