Saya mencoba menampilkan gambar melingkar dengan bayangan, tetapi di web Flutter, bayangan terpotong di tepinya, saat berfungsi dengan baik di seluler.

enter image description here

Kode minimum untuk direproduksi adalah:

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

Saya mencoba menambahkan bantalan ke wadah tetapi tidak membantu, tidak yakin harus berbuat apa lagi.

1
SakoDaemon 6 Maret 2020, 22:27

1 menjawab

Jawaban Terbaik

Solusi cepat - Tambahkan satu wadah lagi di atas dan atur sebagai transparan dengan ukuran tetap Anda. warna: Warna.transparan

Ini membuatnya menggambar seluruh wadah karena itu tidak memotong wadah anak itu, sehingga Anda dapat menambahkan bantalan ke anak dan membuat cukup ruang untuk bayangan.

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

Referensi: https://github.com/flutter/flutter/issues/32215# issuecomment-596143172

1
Alexandru Pavel 7 Maret 2020, 22:46