flutter 如何制作带有抖动的圆形网络svg？

disho6za 于 2023-01-21 发布在 Flutter

关注(0)|答案(2)|浏览(131)

已经两天了，无法为网络SVG图像创建圆形边框，我尝试了所有创建圆形边框的小部件，如Container()、CircleAvatar()和ClipRRect()，这些小部件无法与网络SVG图像(SvgPicture.network())一起使用
预期视图：

注：对于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()),
                          ),
                        ),
                      )

实际产量：

flutter

来源：https://stackoverflow.com/questions/73499146/how-make-circular-network-svg-with-flutter

2条答案

按热度按时间

g52tjvyc1#

使用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;
  }
}

赞(0）回复(0）举报 2023-01-21

cwxwcias2#

我使用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