如何用 flutter 制作圆形网络 svg？答案

【问题标题】：How make circular network svg with flutter?如何用 flutter 制作圆形网络 svg？
【发布时间】：2023-01-20 19:33:40
【问题描述】：

已经两天了，无法为网络 svg 图像制作圆形边框，我已经尝试了所有制作圆形边框的小部件，如 Container()、CircleAvatar() 和 ClipRRect()，这些不适用于网络 svg 图像@ 987654329@

预期视图：

注意：对于 svg 图像，使用了 flutter_svg 插件。

这是我试过的一段代码：

Container(
                        alignment: Alignment.center,
                        height: 30,
                        width: 30,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          shape: BoxShape.circle,
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(200),
                          child: SvgPicture.network(
                            controller.appCountry.value.flag!,
                            alignment: Alignment.bottomCenter,
                            fit: BoxFit.cover,
                            placeholderBuilder: (BuildContext context) =>
                                Container(
                                    alignment: Alignment.center,
                                    child: const CircularProgressIndicator()),
                          ),
                        ),
                      )

实际输出：

【问题讨论】：

标签： dart svg flutter-layout

【解决方案1】：

使用ClipOval和CustomClipper，以便您可以修改值。

SizedBox(
      width: 30.0,
      height: 30.0,
      child: ClipOval(
          clipper: MyOvalClipper(),
          child: SvgPicture.network(
            controller.appCountry.value.flag!,
            alignment: Alignment.bottomCenter,
            fit: BoxFit.cover,
            placeholderBuilder: (BuildContext context) =>
                Container(
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator()),
          ),
      ),
    );

定制剪刀：MyOvalClipper：

class MyOvalClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) {
    // TODO: implement getClip
    //modify value here based on your need
    //size width = 30.0, and height = 30.0 regardless of child size its don't matter
    var rect = const Rect.fromLTWH(0.0, 0.0, 30.0, 30.0);
    return rect;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

【讨论】：

谢谢你给我你的时间，但它不能正常工作

【解决方案2】：

我使用this anwer，下面的代码对我有用

SizedBox(
    width: 24,
    height: 24,
    child: ClipRRect(
        borderRadius: BorderRadius.circular(1000),
        child: SvgPicture.network(
            countryList[index].image ?? '',
            fit: BoxFit.cover,
        ),
    ),
),

这个 svg url 的结果：https://upload.wikimedia.org/wikipedia/commons/c/ca/Flag_of_Iran.svg

【讨论】：