Flutter 圆形轮廓图片 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与 a 结合使用，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(),
      ),
    ),
  ),
);