Circular BoxDecoration 阴影在网络上被切割成盒子形状，而不是在移动设备上

Question

我正在尝试显示带有阴影的圆形图像，但在 Flutter 网络上，阴影在边缘被切割，而在移动设备上运行良好。

要重现的最低代码是：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Column(
              children: <Widget>[
                Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(color: Colors.black, blurRadius: 12.0),
                        ],
                        shape: BoxShape.circle,
                        image: DecorationImage(
                            fit: BoxFit.fill,
                            image: NetworkImage(
                                'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=1000&fit=clip')))),
              ],
            )
          ],
        ),
      ),
    );
  }
}

我尝试向容器中添加填充，但没有用，不知道还能做什么。

Answer 1

快速解决方法 - 在顶部再添加一个容器，并将其设置为透明且固定大小。颜色：Colors.transparent

这使得它绘制整个容器，因此不会剪裁它的子容器，因此您可以为子容器添加填充并为阴影制作足够的 space。

Container(
  width: 100,
  height: 100,
  color: Colors.transparent,
  child: Padding(
    padding: const EdgeInsets.all(15.0),
    child: Container(
        decoration: BoxDecoration(
            boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 12.0),
        ],
            shape: BoxShape.circle,
            image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                    'https://images.theconversation.com/files/93616/original/image-20150902-6700-t2axrz.jpg')))),
  ),
),

参考：https://github.com/flutter/flutter/issues/32215#issuecomment-596143172

Circular BoxDecoration 阴影在网络上被切割成盒子形状，而不是在移动设备上

Circular BoxDecoration shadow gets cut in a box shape on web, not on mobile

flutter

dart

flutter-web

mobile-development