[英]Flutter rounded profile image appBar
I'm currently new to Flutter and Dart language and I'm trying to set a profile image to my leading attribute of my appBar. 我现在是Flutter和Dart语言的新手,我正在尝试将个人资料图片设置为我的appBar的主要属性。
So far I've got my image to be rounded, but I can't make it smaller nor put a margin to the left side. 到目前为止,我已经将我的图像四舍五入,但我不能让它变小,也不能在左侧加上边距。
Here's a snippet of my code: 这是我的代码片段:
@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();
},
)
],
),
// ... // ...
And here's how it looks: Click here 这是它的外观: 点击这里
As you can see, my image is way too big and there's no margin to the left side... 正如你所看到的,我的形象太大了,左边没有边缘......
How can I make the image smaller and most importantly, make a left margin similar to the refresh button right's margin? 如何使图像更小,最重要的是,使左边距类似于刷新按钮右边距?
Any help would be appreciated, Have a good one. 任何帮助将不胜感激,有一个好的。
Consider using Material
combined with a shape: new CircleBorder()
instead of manually creating a circle. 考虑使用Material
与shape: new CircleBorder()
结合shape: new CircleBorder()
而不是手动创建圆。 Or a CircleAvatar
if that fits your needs. 或者CircleAvatar
如果符合您的需求。
Then add a Padding
to control the size and margin. 然后添加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(),
),
),
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.