Gambar Rounded Corners di Flutter

122

Saya menggunakan Flutter untuk membuat daftar informasi tentang film. Sekarang saya ingin gambar sampul di sebelah kiri menjadi gambar sudut membulat. Saya melakukan hal berikut, tetapi tidak berhasil. Terima kasih!

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

sebagai berikut

masukkan deskripsi gambar di sini

Liu Silong
sumber
Apakah Anda sudah mengetahui mengapa metode ini tidak berhasil?
Martin

Jawaban:

356

Gunakan ClipRRectitu akan bekerja dengan sempurna

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
Abdi Hamid
sumber
9
Terima kasih! Saya melakukannya seperti yang Anda katakan, dan kemudian menambahkan fit: BoxFit.fill, itu terlihat cukup bagus.
Liu Silong
2
Terima kasih - apakah Anda tahu cara membuat bingkai berwarna-warni pada gambar clipRRect'ed?
iKK
3
@iKK - Bungkus dalam Wadah dengan KotakDekorasi dengan perbatasan / perbatasan yang sesuai Alat peraga Radius sebagai berikut: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )
Daniel Allen
1
terima kasih, tip: hanya berfungsi dengan lebar dan tinggi yang sama
Álvaro Agüero
50

Anda juga bisa menggunakan CircleAvatar, yang dilengkapi dengan flutter

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
onmyway133
sumber
2
Ini jawaban terbaik. Saya melakukan ekstrabackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
penyelamat123
@ saviour123 tidak semua gambar dengan sudut membulat adalah 'avatar'. Jawaban yang diterima adalah jawaban yang umum.
nipunasudha
Tidak dapat menyetel tinggi atau lebar dengan widget ini, yang bermasalah.
papillon
38

Menggunakan ClipRRectAnda perlu hardcode BorderRadius, jadi jika Anda membutuhkan hal-hal melingkar lengkap, gunakan ClipOvalsaja.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
CopsOnRoad
sumber
2
Jawaban paling sederhana!
Alvin Konda
1
jika gambar anak tidak persegi, pemotongan akan berbentuk elips dalam solusi ini.
Bilal Şimşek
29

Coba ini sebagai gantinya, berhasil untuk saya:

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),
Faisal Kc
sumber
Jawaban Anda pasti membantu, terima kasih! Tapi bagaimana jika konten sebuah wadah bukan hanya gambar tapi widget? Ada ide?
Oleksandr
13
   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),
simhachalam.dll
sumber
5

Untuk gambar gunakan ini

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

Sedangkan untuk Asset Image gunakan ini

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)
ikben
sumber
1
Saya telah menggunakan ini sebagai jawaban, Anda tidak memberikan sesuatu yang berguna. -1 dari saya.
CopsOnRoad
4

Dengan versi baru flutter dan tema material, Anda juga perlu menggunakan widget "Padding" untuk memiliki gambar yang tidak memenuhi containernya.

Misalnya jika Anda ingin memasukkan gambar bulat di AppBar, Anda harus menggunakan padding atau gambar Anda akan selalu setinggi AppBar.

Semoga ini bisa membantu seseorang

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),
Patrick Gharapetians Gheshlagh
sumber
3

Anda dapat menggunakan ClipRRect seperti ini:

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

Anda dapat mengatur radius Anda, atau pengguna hanya untuk kiri atas atau bawah seperti:

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )
sana ebadi
sumber
2

Gunakan ClipRRect dengan mengatur properti gambar fit: BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),
Yogesh Alai
sumber
1

Gunakan ClipRRect ini akan menyelesaikan masalah Anda.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),
Paras Sharma
sumber
0

Gunakan Cara ini di gambar lingkaran ini juga berfungsi + Anda memiliki preloader juga untuk gambar jaringan:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )
Ajit Singh
sumber
0

Coba Ini bekerja dengan baik.

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);
terap30
sumber
-1

dekorasi pengguna Gambar untuk wadah.

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );
SR Keshav
sumber