গোলমাল কর্নারের চিত্রটি তেড়ে উঠবে

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, এটি দেখতে বেশ সুন্দর দেখাচ্ছে।

— লিউ সিলং

ধন্যবাদ - কীভাবে ক্লিপআরেক্ট'এইড ইমেজের রঙিন সীমানা তৈরি করবেন সে সম্পর্কে আপনার কোনও ধারণা আছে?

— আইকেকে

@ আই কে কে - যথাযথ সীমানা / বর্ডার রেডিওয়াস প্রপস সহ একটি বক্সডেকারেশন সহ একটি ধারককে এটিকে আবদ্ধ করুন: 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, ), ), )

— ড্যানিয়েল অ্যালেন

ধন্যবাদ, একটি টিপ: কেবল একই প্রস্থ এবং উচ্চতার সাথে কাজ করে

— vlvaro 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

সহজ উত্তর!

— আলভিন কোন্ডা

যদি শিশু চিত্রটি বর্গক্ষেত্র না হয় তবে এই দ্রষ্টব্যটিতে বর্ণবৃত্তাকার হবে।

— বিলাল Şimş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

আপনার উত্সাহ অবশ্যই সহায়ক, ধন্যবাদ! তবে যদি কোনও ধারকের বিষয়বস্তু কেবল একটি চিত্র নয় তবে একটি উইজেট হয়? কোন ধারণা?

— ওলেকসান্ডার

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

আমি ইতিমধ্যে এটি উত্তর হিসাবে ব্যবহার করেছি, আপনি দরকারী কিছু সরবরাহ করেন নি। আমার কাছ থেকে।

— কক্সঅনরোড

Answer 7

ঝাঁকুনি এবং উপাদান থিমের নতুন সংস্করণ সহ আপনার পাত্রে ভরাট নয় এমন একটি চিত্র পেতে আপনাকে "প্যাডিং" উইজেটও ব্যবহার করতে হবে।

উদাহরণস্বরূপ, যদি আপনি অ্যাপবারে একটি বৃত্তাকার চিত্র সন্নিবেশ করতে চান তবে আপনাকে অবশ্যই প্যাডিং ব্যবহার করতে হবে বা আপনার চিত্রটি সর্বদা অ্যাপবারের মতো উঁচুতে থাকবে।

আশা করি এটি কারও সাহায্য করবে

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

আপনি এইভাবে ক্লিপআরেক্ট ব্যবহার করতে পারেন:

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