[英]Flutter: How can I increase radius of border in Circle Image?
I have class CircleImage, with this I try to control radius of circle image and CircleBorder, but i can't do it.我有 class CircleImage,用这个我试图控制圆形图像和 CircleBorder 的半径,但我做不到。 I saw, that I have to use Circle avatar with Border.我看到了,我必须使用带边框的圆形头像。 I try to solve this problem a whole day, please help me:)我试图解决这个问题一整天,请帮助我:)
This my code这是我的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CircleImage extends StatelessWidget {
final String imageSource;
final double size;
CircleImage({@required this.imageSource, this.size}) : super();
@override
Widget build(BuildContext context) {
return Container(
width: size ?? 55,
height: size ?? 55,
decoration: ShapeDecoration(
shape: CircleBorder(
side: BorderSide(width: 1, color: Theme.of(context).primaryColor),
),
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(imageSource),
alignment: Alignment.center)));
}
}
I think you're looking for a RoundedRectangleBorder, not a CircleBorder.我认为您正在寻找 RoundedRectangleBorder,而不是 CircleBorder。
https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(
width: 1,
color: Theme.of(context).primaryColor
),
),
Then, you can change the border radius as you wish...然后,您可以根据需要更改边界半径...
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0), // CHANGE BORDER RADIUS HERE
side: BorderSide(
width: 1,
color: Theme.of(context).primaryColor
),
),
You need to use a CircleAvatar inside a CircleAvatar, like this:您需要在 CircleAvatar 中使用 CircleAvatar,如下所示:
CircleAvatar(
radius: 33.0,
backgroundColor: Colors.blue,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 30.0,
backgroundImage: AssetImage('images/text-image.png'),
),
),
The difference in radius between the outer and inner CircleAvatar radius properties will be the border thickness.外部和内部 CircleAvatar半径属性之间的半径差异将是边框厚度。
In this case, it creates a blue border.在这种情况下,它会创建一个蓝色边框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.