Obraz z zaokrąglonymi rogami w Flutter

123

Używam Fluttera do tworzenia listy informacji o filmach. Teraz chcę, aby obraz okładki po lewej stronie był obrazem z zaokrąglonymi rogami. Wykonałem następujące czynności, ale to nie zadziałało. Dzięki!

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

następująco

wprowadź opis obrazu tutaj

Liu Silong
źródło
Czy wiesz, dlaczego ta metoda nie działa?
Martin

Odpowiedzi:

357

Użyj ClipRRectgo, zadziała idealnie

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
Abdi Hamid
źródło
9
Dzięki ! Zrobiłem to, jak powiedziałeś, a potem dodałem fit: BoxFit.fill, wygląda całkiem nieźle.
Liu Silong
2
Dziękuję - czy masz pomysł, jak stworzyć kolorową ramkę do obrazu naprawionego klipu?
iKK
3
@iKK - Owinąć go w kontener z BoxDecoration z odpowiednimi obramowaniami / borderRadius rekwizyty, tak jak: 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
dzięki, wskazówka: działa tylko z tą samą szerokością i wysokością
Álvaro Agüero
50

Możesz także użyć CircleAvatar, który jest wyposażony w trzepotanie

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
onmyway133
źródło
2
To najlepsza odpowiedź. Zrobiłem extrabackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123
@ saviour123 nie każdy obraz z zaokrąglonymi rogami jest „awatarem”. Zaakceptowana to ogólna odpowiedź.
nipunasudha
Nie można ustawić wysokości ani szerokości za pomocą tego widżetu, co jest problematyczne.
papillon
38

Używając ClipRRectmusisz zakodować na stałe BorderRadius, więc jeśli potrzebujesz kompletnych okrągłych rzeczy, użyj ClipOvalzamiast tego.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
CopsOnRoad
źródło
2
Najprostsza odpowiedź!
Alvin Konda
1
jeśli obraz potomny nie jest kwadratowy, przycinanie będzie eliptyczne w tym rozwiązaniu.
Bilal Şimşek
29

Spróbuj tego zamiast tego, zadziałało dla mnie:

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
źródło
Twoja odpowiedź jest zdecydowanie pomocna, dzięki! Ale co, jeśli zawartość kontenera to nie tylko obraz, ale widżet? Dowolny pomysł?
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
źródło
5

Do obrazu użyj tego

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

Podczas gdy dla Asset Image użyj tego

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)
ikben
źródło
1
Użyłem już tego jako odpowiedzi, nie podałeś nic przydatnego. -1 ode mnie.
CopsOnRoad
4

W nowej wersji motywu flutter i materiału musisz również użyć widżetu „Padding”, aby uzyskać obraz, który nie wypełnia swojego pojemnika.

Na przykład, jeśli chcesz wstawić zaokrąglony obraz w AppBar, musisz użyć dopełnienia lub twój obraz będzie zawsze tak wysoki jak AppBar.

Mam nadzieję, że to komuś pomoże

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
źródło
3

możesz użyć ClipRRect w ten sposób:

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

możesz ustawić swój promień lub użytkownika tylko dla górnego lewego lub dolnego lewego, na przykład:

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
źródło
2

Użyj ClipRRect z ustawioną właściwością obrazu 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
źródło
1

Użyj ClipRRect, to rozwiąże twój problem.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),
Paras Sharma
źródło
0

Użyj tego sposobu w tym okrągłym obrazie również działa + masz preloader również dla obrazu sieciowego:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )
Ajit Singh
źródło
0

Spróbuj To działa dobrze.

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
źródło
-1

Dekoracja użytkownika Obraz kontenera.

  @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
źródło