Flutter - 如何控制抽屉中的个人资料图像大小

Question

我想控制个人资料图像的大小，并将其圆形而不是椭圆形，如下所示。

更改高度和/或宽度值既不会影响大小也不会影响比例，而且奇怪的是，当我更改边距参数时，它会更改椭圆形状的半径。

new UserAccountsDrawerHeader(
  decoration: BoxDecoration(color: Colors.white),
  currentAccountPicture: new Container(
    margin: const EdgeInsets.only(bottom: 40.0),
    width: 10.0,
    height: 10.0,
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        fit: BoxFit.fill,
        image: new NetworkImage(
          "https://example.com/assets/images/john-doe.jpg",
        ),
      ),
    ),
  ),
  accountName: new Container(
    ...
  ),
  accountEmail: new Container(
    ...
  ),
  onDetailsPressed: () {
    ...
  },
),

我究竟做错了什么 ？

更新：上述方法是 CircleAvatar 的一种解决方法，它没有对图像大小进行任何控制。如果您以某种不同的方式尝试使用 CircleAvatar 来控制图像大小，请分享它以提供帮助。

Answer 1

使用此代码获取网络图像：

                new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      backgroundImage: NetworkImage("Your Photo Url"), // for Network image

                    ),

将其用于资产图像：

              new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      child: new Image.asset(
                        'images/profile.png',
                      ), //For Image Asset

                    ),

Answer 2

您将边距放在图像的 Container 内，而您必须使用 UserAccountDrawerHeader 的边距参数，这就是您的图像变成椭圆形的原因：

UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.white),
            margin: EdgeInsets.only(bottom: 40.0),                                            
          currentAccountPicture: Container(  
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image:
                        NetworkImage("https://via.placeholder.com/150"))),
          ),
          accountName: new Container(
              child: Text(
            'Name',
            style: TextStyle(color: Colors.black),
          )),
          accountEmail: new Container(
              child: Text(
            'Email',
            style: TextStyle(color: Colors.black),
          )),
        ),