首页 文章

颤动圆形轮廓图像appBar

提问于
浏览
2

我目前是Flutter和Dart语言的新手,我正在尝试将 Profiles 图片设置为我的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();
              },
            )
          ],
        ),

// ...

这是它的外观:Click here

正如你所看到的,我的形象太大了,左边没有边缘......

如何使图像更小,最重要的是,使左边距类似于刷新按钮右边距?

任何帮助将不胜感激,有一个好的 .

1 回答

  • 0

    考虑使用 Materialshape: 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(),
          ),
        ),
      ),
    );
    

    enter image description here

相关问题