स्पंदन में गोल कोनों छवि

Question

मैं फिल्मों के बारे में जानकारी की एक सूची बनाने के लिए स्पंदन का उपयोग कर रहा हूं। अब मैं चाहता हूं कि बाईं ओर कवर छवि एक गोल कोनों वाली तस्वीर हो। मैंने निम्नलिखित कार्य किया, लेकिन यह काम नहीं किया। धन्यवाद!

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

निम्नलिखित नुसार

Comments

क्या आपने यह पता लगाया कि यह विधि काम क्यों नहीं कर रही है?

— मार्टिन

Answer 1

उपयोग करें ClipRRectयह पूरी तरह से काम करेगा

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

Comments

धन्यवाद ! जैसा आपने कहा, मैंने वैसा ही किया और फिर जोड़ा fit: BoxFit.fill, यह बहुत अच्छा लग रहा है।

— लियू सिलोंग

धन्यवाद - क्या आपको इस पर कोई विचार है कि क्लिपरैकेड इमेज के लिए रंगीन बॉर्डर कैसे बनाएं?

— IKK

: @iKK - लपेटें यह उचित सीमा के साथ एक BoxDecoration के साथ एक कंटेनर में / borderRadius सहारा के रूप में तो 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, ), ), )

— डैनियल एलन

धन्यवाद, एक टिप: केवल एक ही चौड़ाई और ऊंचाई के साथ काम करता है

— valvaro Agüero

Answer 2

आप उपयोग भी कर सकते हैं CircleAvatar, जो स्पंदन के साथ आता है

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

Comments

यह सबसे अच्छा जवाब है। मैंने backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,

— saviour123

@ saviour123 गोल कोनों वाली हर छवि एक 'अवतार' नहीं है। स्वीकार किया गया एक सामान्य उत्तर है।

— निपुणसुधा

इस विजेट के साथ एक ऊंचाई या चौड़ाई सेट नहीं कर सकते, जो समस्याग्रस्त है।

— पेपिलॉन

Answer 3

ClipRRectआपको हार्डकोड का उपयोग करने की आवश्यकता है BorderRadius, इसलिए यदि आपको पूर्ण परिपत्र सामान की आवश्यकता है, तो ClipOvalइसके बजाय उपयोग करें ।

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

Comments

सबसे सरल उत्तर!

— एल्विन कोंडा

अगर बच्चे की छवि वर्गाकार नहीं है तो इस घोल में दीर्घवृत्ताभ होगा।

— बिलाल ekसिमेक

Answer 4

इसके बजाय यह कोशिश करो, मेरे लिए काम किया:

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

Comments

आपका aswer निश्चित रूप से उपयोगी है, धन्यवाद! लेकिन क्या होगा अगर एक कंटेनर की सामग्री केवल एक छवि नहीं है, लेकिन एक विजेट है? कोई उपाय?

— ओलेकेंड्रा

Answer 5

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

Answer 6

छवि के लिए यह प्रयोग करें

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

जबकि एसेट इमेज के लिए इसका उपयोग करें

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

Comments

मैंने पहले ही इसका उपयोग उत्तर के रूप में किया है, आपने कुछ भी उपयोगी नहीं दिया है। -1 मुझसे।

— CopsOnRoad

Answer 7

फ़्लटर और मटेरियल थीम के नए संस्करण के साथ "पैडिंग" विजेट का भी उपयोग करने की आवश्यकता है ताकि एक छवि हो जो उसके कंटेनर को न भरे।

उदाहरण के लिए यदि आप AppBar में एक गोल छवि सम्मिलित करना चाहते हैं तो आपको गद्दी का उपयोग करना चाहिए या आपकी छवि हमेशा AppBar जितनी ऊँची रहेगी।

आशा है कि यह किसी की मदद करेगा

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

Answer 8

आप इस तरह से ClipRRect का उपयोग कर सकते हैं:

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

आप अपने त्रिज्या, या उपयोगकर्ता के लिए सेट कर सकते हैं केवल ऊपर के लिए या नीचे छोड़ दिया जैसे:

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

Answer 9

फिट की सेट छवि संपत्ति के साथ ClipRRect का उपयोग करें: 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,
          ),
        ),

Answer 10

ClipRRect का उपयोग करें यह आपकी समस्या का समाधान करेगा।

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

Answer 11

इस तरह से इस सर्कल का उपयोग करें छवि भी काम कर रही है + आपके पास नेटवर्क छवि के लिए भी प्रीलोडर है:

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

Answer 12

यह कोशिश करो यह अच्छी तरह से काम करता है।

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

Answer 13

एक कंटेनर के लिए उपयोगकर्ता सजावट छवि।

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