Круглая тень BoxDecoration обрезается в форме коробки на вебе, а не на мобильном - PullRequest
Новая
       4

Круглая тень BoxDecoration обрезается в форме коробки на вебе, а не на мобильном

1 голос
/ 06 марта 2020

Я пытаюсь отобразить круглое изображение с тенью, но на веб-сайте Flutter тень обрезается по краям, при этом работает нормально на мобильном телефоне.

enter image description here

Минимальный код для воспроизведения: 

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')))),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Я пытался добавить заполнение в контейнер, но это не помогло, не уверен, что еще делать.

1 Ответ

1 голос
/ 08 марта 2020

Быстрый обходной путь - добавьте еще один контейнер сверху и установите его как прозрачный с фиксированным размером. color: Colors.transparent

Это заставляет его рисовать весь контейнер, поэтому не обрезая его дочерний контейнер, поэтому вы можете добавить отступы к дочернему элементу и освободить место для теней. 

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

...