如何在 AppBar 上制作圓形個人資料圖片（操作按鈕）

Question

顫振開發人員：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),
),

類似於 Appbar 右上角的圖標，但替換為用戶個人資料圖片

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

Answer 2

您也可以這樣做，也可以將其包裝在容器下並使其呈圓形，並將容器的子小部件作為您的圖像。 這是代碼：

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",
            ),
          ),
        )
      ],
    ),

這是結果圖像：