Flutter：如何增加“圆形图像”中的边框半径？

Question

我有CircleImage类，因此我尝试控制圆形图像和CircleBorder的半径，但是我做不到。我看到，我必须将Circle头像与Border一起使用。我会整天尝试解决此问题，请帮助我：）

  

这是我的代码

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)));
  }
}

  

此刻我有什么   

Answer 1

我认为您正在寻找的是RoundedRectangleBorder，而不是CircleBorder。

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
        ),
      ),

然后，您可以根据需要更改边框半径...

shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.0), // CHANGE BORDER RADIUS HERE
        side: BorderSide(
          width: 1,
          color: Theme.of(context).primaryColor
        ),
      ),

Answer 2

您需要在CircleAvatar内部使用CircleAvatar，如下所示：

CircleAvatar(
    radius: 33.0,
    backgroundColor: Colors.blue,
    child: CircleAvatar(
        backgroundColor: Colors.white,
        radius: 30.0,
        backgroundImage: AssetImage('images/text-image.png'),
    ),
),

CircleAvatar外部属性和内部属性半径之间的半径差将是边框的厚度。

在这种情况下，它会创建一个蓝色边框。