Abgerundete Ecken Bild im Flattern

120

Ich verwende Flutter, um eine Liste mit Informationen zu Filmen zu erstellen. Jetzt möchte ich, dass das Titelbild links ein Bild mit abgerundeten Ecken ist. Ich habe folgendes getan, aber es hat nicht funktioniert. Vielen Dank!

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

wie folgt

Geben Sie hier die Bildbeschreibung ein

Liu Silong
quelle

Antworten:

351

Verwenden Sie ClipRRectes wird perfekt funktionieren

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
Abdi Hamid
quelle
9
Vielen Dank ! Ich habe es getan, wie Sie gesagt haben, und dann hinzugefügt fit: BoxFit.fill, es sieht ziemlich gut aus.
Liu Silong
2
Vielen Dank - haben Sie eine Idee, wie Sie einen farbigen Rand für das Bild von clipRRect erstellen können?
iKK
3
@iKK - Wickeln Sie es in einen Behälter mit einer BoxDecoration mit den entsprechenden border / borderRadius-Requisiten wie folgt: 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
danke, ein Tipp: funktioniert nur mit der gleichen Breite und Höhe
Álvaro Agüero
50

Sie können auch verwenden CircleAvatar, was mit Flattern kommt

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
onmyway133
quelle
2
Dies ist die beste Antwort. Ich habe extrabackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123
@ saviour123 Nicht jedes Bild mit abgerundeten Ecken ist ein "Avatar". Akzeptiert ist die generische Antwort.
Nipunasudha
Mit diesem Widget kann keine Höhe oder Breite festgelegt werden, was problematisch ist.
Papillon
38

Verwenden ClipRRectSie müssen hart codieren BorderRadius. Wenn Sie also vollständige kreisförmige Inhalte benötigen, verwenden Sie ClipOvalstattdessen.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
CopsOnRoad
quelle
2
Die einfachste Antwort!
Alvin Konda
1
Wenn das untergeordnete Bild nicht quadratisch ist, ist das Ausschneiden in dieser Lösung elliptisch.
Bilal Şimşek
29

Versuchen Sie dies stattdessen, arbeitete für mich:

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
quelle
Ihre Antwort ist auf jeden Fall hilfreich, danke! Was aber, wenn der Inhalt eines Containers nicht nur ein Bild, sondern ein Widget ist? Irgendeine Idee?
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
quelle
5

Verwenden Sie dies für das Bild

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

Verwenden Sie dies für Asset Image

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)
ikben
quelle
1
Ich habe dies bereits als Antwort verwendet, Sie haben nichts Nützliches angegeben. -1 von mir.
CopsOnRoad
4

Mit der neuen Version von Flatter und Materialthema müssen Sie auch das Widgett "Padding" verwenden, um ein Bild zu erhalten, das den Container nicht ausfüllt.

Wenn Sie beispielsweise ein abgerundetes Bild in die AppBar einfügen möchten, müssen Sie eine Auffüllung verwenden. Andernfalls ist Ihr Bild immer so hoch wie die AppBar.

Hoffe das wird jemandem helfen

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
quelle
3

Sie können ClipRRect folgendermaßen verwenden:

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

Sie können Ihren Radius oder Benutzer nur für oben links oder unten links festlegen, wie:

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
quelle
2

Verwenden Sie ClipRRect mit der festgelegten Bildeigenschaft 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
quelle
1

Verwenden Sie ClipRRect, um Ihr Problem zu beheben.

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

Verwenden Sie diese Methode in diesem Kreis Bild funktioniert auch + Sie haben Preloader auch für Netzwerk-Image:

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

Versuchen Sie dies, es funktioniert gut.

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
quelle
-1

Benutzerdekoration Bild für einen Container.

  @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
quelle