顫動圓形輪廓圖像appBar

Question

我現在是Flutter和Dart語言的新手，我正在嘗試將個人資料圖片設置為我的appBar的主要屬性。

到目前為止，我已經將我的圖像四舍五入，但我不能讓它變小，也不能在左側加上邊距。

這是我的代碼片段：

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: new AppBar(
          title: new Text("Activities"),
          leading: new Container(
            padding: new EdgeInsets.all(15.0),
            width: 10.0,
            height: 10.0,
            decoration: new BoxDecoration(
              color: const Color(0xff7c94b6),
              borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
              border: new Border.all(
                color: Colors.white,
                width: 1.0,
              ),
            ),
          ),
          actions: <Widget>[
            new IconButton(
              icon: new Icon(Icons.refresh),
              onPressed: () {
                print("Reloading...");
                setState(() {
                  _isLoading = true;
                });
                _FetchData();
              },
            )
          ],
        ),

// ...

這是它的外觀： 點擊這里

正如你所看到的，我的形象太大了，左邊沒有邊緣......

如何使圖像更小，最重要的是，使左邊距類似於刷新按鈕右邊距？

任何幫助將不勝感激，有一個好的。

Answer 1

考慮使用Material與shape: new CircleBorder()結合shape: new CircleBorder()而不是手動創建圓。 或者CircleAvatar如果符合您的需求。

然后添加Padding以控制大小和邊距。

return new Scaffold(
  backgroundColor: Colors.blueGrey,
  appBar: new AppBar(
    title: new Text("Activities"),
    leading: new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Material(
        shape: new CircleBorder(),
      ),
    ),
  ),
);