কীভাবে বিড়বিড় করে কোনও উইজেটে সীমানা যুক্ত করবেন?

Question

আমি ফ্লটার ব্যবহার করছি এবং আমি একটি উইজেটের সীমানা যুক্ত করতে চাই (এই ক্ষেত্রে, একটি পাঠ্য উইজেট)।

আমি টেক্সট স্টাইল এবং পাঠ্য চেষ্টা করেছিলাম, তবে কীভাবে কোনও সীমানা যুক্ত করা যায় তা আমি দেখিনি।

Answer 1

আপনি যোগ করতে পারেন TextFieldহিসেবে childএকটি থেকে Containerআছে একটি BoxDecorationসঙ্গে borderসম্পত্তি:

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Answer 2

এখানে একটি বিস্তৃত উত্তর। একটি DecoratedBoxআপনার সীমানা যুক্ত করতে হবে তবে আমি Containerমার্জিন এবং প্যাডিংয়ের সুবিধার্থে একটি ব্যবহার করছি ।

এখানে সাধারণ সেটআপ দেওয়া আছে।

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

যেখানে BoxDecorationহয়

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

সীমানার প্রশস্থতা

এই একটি সীমানা প্রস্থ আছে 1, 3এবং 10যথাক্রমে।

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

সীমান্ত রঙ

এগুলির সীমানার রঙ রয়েছে

• Colors.red
• Colors.blue
• Colors.green

কোড

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

বর্ডার সাইড

এগুলির একটি সীমান্ত দিক রয়েছে

• বাম (3.0), শীর্ষ (3.0)
• নীচে (১৩.০)
• বাম (নীল [100], 15.0), শীর্ষ (নীল [300], 10.0), ডান (নীল [500], 5.0), নীচে (নীল [800], 3.0)

কোড

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

সীমানার ব্যাসার্ধ

এই সীমানা ব্যাসার্ধ আছে 5, 10এবং 30যথাক্রমে।

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

যাচ্ছে

DecoratedBox/ BoxDecorationখুব নমনীয়। বিড়ম্বনা পড়ুন - আরও অনেক ধারণার জন্য বক্সডেকারেশন চিট শীট ।

Comments

বর্ডাররিডিয়াসের সাথে বর্ডারসাইড কীভাবে ব্যবহার করতে হয় কেউ জানেন?

— হাসসন তাই

@ হাসনেটটাই কোন সমাধান পেয়েছেন? আমার ডিজাইনে আমাকে আকারের মতো বড়ি দিয়ে সীমানা নীচে দেওয়া দরকার। আমি কীভাবে এটি অর্জন করতে পারি?

— রবার্ট উইলিয়ামস

@ রবার্ট উইলিয়ামস, আমি একটি কাস্টম অঙ্কন উইজেট ব্যবহার করব।

— সুরগচ

@ সুরগাচ উইজেটটি পাঠ্য যা একটি শক্ত (বড়ি আকারের) সীমানা প্রয়োজন। পাঠ্য উইজেটের প্রস্থ স্থির নয়। কাস্টম অঙ্কন উইজেট ব্যবহারের জন্য আমার কি স্থির বৈশিষ্ট্য সরবরাহ করার দরকার নেই?

— রবার্ট উইলিয়ামস

@ রবার্ট উইলিয়ামস, আপনি ঠিক কী করতে চাইছেন তা আমি ঠিক জানি না। আমি বর্তমানে কী কাজ করছে না তার উদাহরণ এবং ব্যাখ্যা সহ একটি নতুন প্রশ্ন খুলব open এখান থেকে লিঙ্ক নির্দ্বিধায়।

— সুরগাচ

Answer 3

ডকুমেন্টেশনে যেমন বলা হয়েছে, ফড়ফড় করে পরামিতিগুলির চেয়ে বেশি রচনা পছন্দ করে। আপনি যা সন্ধান করছেন বেশিরভাগ সময় কোনও সম্পত্তি নয়, পরিবর্তে একটি মোড়ক (এবং কখনও কখনও কয়েকটি সহায়ক / "বিল্ডার") হয়

সীমানার জন্য আপনি DecoratedBoxযা চান তা হ'ল , যার এমন একটি decorationসম্পত্তি রয়েছে যা সীমানা সংজ্ঞায়িত করে; এছাড়াও পটভূমি চিত্র বা ছায়া গো।

বিকল্প হিসাবে @ আজিজা বলেছিলেন, আপনি ব্যবহার করতে পারেন Container। যার সংমিশ্রণ DecoratedBox, SizedBoxএবং কয়েক অন্যান্য দরকারী উইজেট।

Answer 4

বক্সডেকোরেশন () ব্যবহারের সর্বোত্তম উপায়

সুবিধা

• আপনি সীমানা সেট করতে পারেন উইজেটের
• আপনি সীমানা রঙ সেট করতে পারেন বা প্রস্থ
• আপনি বৃত্তাকার কোণার সেট করতে পারেন সীমান্তের
• আপনি উইজেটের ছায়া যুক্ত করতে পারেন

অসুবিধা

• BoxDecorationকেবলমাত্র Containerউইজেট ব্যবহার করুন যাতে আপনি আপনার উইজেটটি মোড়তে চানContainer()
  
  

উদাহরণ

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

Answer 5

বক্সডেকোরেশন () ব্যবহার করা হ'ল সীমান্ত দেখানোর সর্বোত্তম উপায়।

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

আপনি এখানে পুরো ফর্ম্যাটটি দেখতে পারেন

Answer 6

আপনার উইজেটটি ধারণ করতে আপনি ধারকটি ব্যবহার করতে পারেন:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Answer 7

Boxdercoration সহ একটি ধারক ব্যবহার করুন।

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );