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

【问题标题】：How to make circle profile pic (action button) on AppBar如何在 AppBar 上制作圆形个人资料图片（操作按钮）
【发布时间】：2019-01-04 09:52:30
【问题描述】：

Flutter 开发人员：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),
),

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

【问题讨论】：

标签： dart flutter

【解决方案1】：

您也可以这样做，也可以将它包装在一个容器下并使其成为圆形，并将您的 Container 的子小部件作为您的图像。这是代码：

appBar: AppBar(
      centerTitle: false,
      backgroundColor: Color(0xff3a3637),
      title: Text("HIMATIF APP"),
      actions: <Widget>[
        Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white, //remove this when you add image.
            ),
            child: CachedNetworkImage(
              width: 120,
              height: 120,
              fit: BoxFit.cover,
              imageUrl: "imageUrl goes here",
            ),
          ),
        )
      ],
    ),

这是结果图像：

【讨论】：

这似乎可以解决问题，但由于某种原因它没有。容器不会裁剪它的子节点，所以如果子节点是正方形，它将显示为正方形图像。
它会在你添加图片的时候使用： image: new DecorationImage( fit: BoxFit.fill, image: new NetworkImage( "image url") ) )
基本使用图片的fit属性到Boxfilt.fill
如果你这样做，它会，但发布这个问题的人使用的是 CachedNetworkImage，这样你的解决方案就行不通了。
如果您将 CachedNetworkImageProvider 与使用 DecorationImage 的解决方案一起使用，您将失去使用 CachedNetworkImage 的占位符小部件和内容的好处

【解决方案2】：

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(),
      ),
    ),
  ),
)

【讨论】：

谢谢你，你救了我的命哈哈 :D 你还有一个问题，在我看来，如果图像不是完全正方形，它会破坏“圆形”。因此，我必须减小高度和宽度值。应用安装在不同分辨率的其他设备上会不会是一个圆圈？
@MuhammadIslamTaufikurahman 我已经解决了您的问题。从“正方形”溢出的图像的任何部分都将被裁剪，因为我已将 fit 属性设置为 BoxFit.cover。尝试将非方形图片设置为您的个人资料图片，看看会发生什么。
啊，你说得对，有没有办法在这里面实现占位符图片？
@MuhammadIslamTaufikurahman 是的，您可以给 CachedNetrowkImage 一个占位符属性并指定占位符小部件。我现在会用一些例子来编辑我的代码！
再次感谢队友：D