如何在AppBar上制作圆形个人资料图片（操作按钮）

Question

同胞 flutter Dev :D 目前，我正在寻找一种用我使用 URL 获得的个人资料图片替换 Appbar 操作按钮图标的方法。唯一的问题是我似乎无法找到使其循环的方法。任何想法？

这是我的 AppBar 类

class MyAppBar extends AppBar {
  MyAppBar({Key key, String  urlFoto})
  : super(
    key: key,
    title: Text(
      "Himatif App",
      style: TextStyle(fontFamily: 'Strasua'),
    ),
    backgroundColor: Color(0xff3a3637),
    actions: <Widget>[
      // Something here
    ]
  );
}

我找到并尝试过的一些代码

Padding(
  padding: const EdgeInsets.all(8.0),
  child: new Material(
    shape: new CircleBorder(),
  ),
),

/////////////

Material(
  elevation: 4.0,
  shape: CircleBorder(),
  color: Colors.transparent,
  child: Ink.image(
    image: CachedNetworkImageProvider(urlFoto),
    fit: BoxFit.cover,
    width: 120.0,
    height: 120.0,
    child: InkWell(
      onTap: () {},
      child: null,
    ),
  ),
)

/////////////

CircleAvatar(
  minRadius: 5.0,
  maxRadius: 10.0,
  backgroundImage: CachedNetworkImageProvider(urlFoto),
),

类似应用栏右上角的图标，但替换为用户个人资料图片

Answer 1

ClipRRect 小部件使其子小部件成为圆形。您可以用墨水瓶将其包裹起来，使其具有按钮的功能。

InkWell(
  onTap: () {},
  child: ClipRRect(
    borderRadius: BorderRadius.circular(60),
    child: CachedNetworkImage(
      width: 120,
      height: 120,
      fit: BoxFit.cover,
      imageUrl: "imageUrl goes here",
      placeholder: Center(
        child: CircularProgressIndicator(),
      ),
    ),
  ),
)