Expanded: এটি কী এবং Flutter-এ কীভাবে কাজ করে

Expanded কী

Expanded একটি র্যাপার উইজেট যা একটি চাইল্ড নেয় এবং এটিকে Flex কন্টেইনারে (Row, Column, Flex) উপলব্ধ স্থান পূরণ করতে প্রসারিত হতে বাধ্য করে। Expanded-এর নিজস্ব কোনো দৃশ্যমান উপস্থাপনা নেই — এটি শুধুমাত্র চাইল্ড এলিমেন্টে প্রেরিত সীমাবদ্ধতাগুলি (constraints) পরিচালনা করে।

Expanded-এর ভিত্তিতে রয়েছে Flutter ফ্রেমওয়ার্ক দ্বারা প্রদত্ত Flex মেকানিজম। যখন Row বা Column তাদের শিশুদের আকার গণনা করে, তারা প্রথমে অদম্য উপাদানগুলিতে (স্থির আকারের সাধারণ উইজেট) স্থান বরাদ্দ করে, তারপর অবশিষ্ট স্থান তাদের flex ফ্যাক্টরের অনুপাতে Expanded এবং Flexible শিশুদের মধ্যে বিতরণ করে।

Expanded ব্যবহার করে Flexible.fit = FlexFit.tight। এর অর্থ হল Expanded-এর চাইল্ডকে সমস্ত বরাদ্দকৃত স্থান দখল করতে হবে, এমনকি যদি তার নিজের আকার ছোট হয়। Flexible-এর Fit.loose-এর বিপরীতে, যেখানে চাইল্ড বরাদ্দকৃত এলাকা থেকে ছোট হতে পারে, Expanded জোরপূর্বক বিষয়বস্তু প্রসারিত করে।

সংক্ষেপে: Expanded হল Flutter-এ আনুপাতিক লেআউট তৈরি করার প্রাথমিক হাতিয়ার। এটি ব্যবহার করুন যখন আপনার প্রয়োজন হয় যে একটি উপাদান গ্যারান্টিযুক্তভাবে সমস্ত উপলব্ধ প্রস্থ বা উচ্চতা পূরণ করুক।

Expanded বনাম Flexible: মূল পার্থক্য

Expanded এবং Flexible উভয়ই Flex কন্টেইনারে স্থান বিতরণ করে, কিন্তু মৌলিকভাবে ভিন্ন আচরণ করে। পার্থক্যটি fit প্রপার্টিতে রয়েছে, যা নির্ধারণ করে চাইল্ড উপলব্ধ স্থানের চেয়ে ছোট হতে পারে কিনা।

Expanded-এর একটি কঠোর আচরণ মডেল রয়েছে: এর fit সমান FlexFit.tight। এর অর্থ চাইল্ড উইজেট উপলব্ধ স্থানের সমান সীমাবদ্ধতা পায় — বেশি নয়, কম নয়। যদি চাইল্ড ছোট হয়, তবে এটি প্রসারিত হয়। যদি বড় হয়, তবে এটি সঙ্কুচিত হয়। Flexible ব্যবহার করে FlexFit.loose, যা চাইল্ড এলিমেন্টকে বরাদ্দকৃত স্থানের মধ্যে যেকোনো আকারের হতে দেয়।

অনুশীলনে: যদি একটি Row-তে flex=1 সহ দুটি Expanded থাকে, প্রতিটি ঠিক অর্ধেক প্রস্থ নেবে। যদি আপনি এগুলিকে fit.loose সহ Flexible দিয়ে প্রতিস্থাপন করেন, প্রতিটি চাইল্ড অর্ধেকের চেয়ে ছোট হতে পারে যদি তার নিজের আকার ছোট হয় — অবশিষ্ট স্থান খালি থাকবে।

সংক্ষেপে: কঠোর আনুপাতিক লেআউটের জন্য Expanded ব্যবহার করুন, Flexible ব্যবহার করুন যখন চাইল্ড উপলব্ধ স্থানের চেয়ে ছোট হতে পারে। যদি নিশ্চিত না হন — Expanded দিয়ে শুরু করুন, এটি আরও পূর্বাভাসযোগ্য আচরণ দেয়।

Flex ফ্যাক্টর: কীভাবে স্থান বিতরণ করা হয়

Flex ফ্যাক্টর (flex প্যারামিটার) একটি সংখ্যাসূচক মান যা নির্ধারণ করে Expanded কতটা উপলব্ধ স্থান পাবে। ডিফল্টরূপে flex=1, যার অর্থ সমস্ত Expanded শিশুদের মধ্যে সমান বিতরণ।

বিতরণ অ্যালগরিদম তিনটি ধাপে কাজ করে। প্রথম: Flutter সমস্ত অদম্য শিশুদের অন্তর্নিহিত আকার গণনা করে। দ্বিতীয়: অবশিষ্ট স্থানকে সমস্ত flex ফ্যাক্টরের যোগফল দিয়ে ভাগ করা হয়। তৃতীয়: প্রতিটি Expanded তার flex ফ্যাক্টরকে একটি flex ইউনিটের আকার দিয়ে গুণ করার সমান অংশ পায়।

উদাহরণস্বরূপ, 300px চওড়া একটি Row-তে দুটি Expanded রয়েছে: প্রথমটি flex=2 সহ, দ্বিতীয়টি flex=1 সহ। খালি স্থান (300px বিয়োগ অদম্য শিশু) 3 ভাগে বিভক্ত। প্রথমটি 2/3 পায়, দ্বিতীয়টি 1/3 পায়। যদি কোনও অদম্য শিশু না থাকে, প্রথমটি 200px পায়, দ্বিতীয়টি 100px পায়।

Flex ফ্যাক্টর যেকোনো ধনাত্মক পূর্ণসংখ্যা হতে পারে। মান 0 একটি বিশেষ ক্ষেত্রে: flex=0 সহ Expanded একটি সাধারণ অদম্য উইজেটের মতো আচরণ করে, চাইল্ডের আকার অনুযায়ী ন্যূনতম স্থান নেয়। এই আচরণটি Expanded না থাকার সমতুল্য।

সংক্ষেপে: flex ফ্যাক্টর হল নমনীয় লেআউট তৈরির চাবিকাঠি। সমান কলামের জন্য 1:1, প্রধান এবং সাইডবার এলাকা সহ প্যানেলের জন্য 2:1, সরু নেভিগেশন সহ ইন্টারফেসের জন্য 3:1 অনুপাত ব্যবহার করুন।

Expanded সহ কোড উদাহরণ

উদাহরণ 1 তিনটি সমান কলাম তৈরি করতে Row-তে Expanded-এর মৌলিক ব্যবহার দেখায়।

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

এই উদাহরণে, তিনটি Expanded (ডিফল্টরূপে flex=1) Row-এর প্রস্থ সমানভাবে ভাগ করে। কন্টেইনারগুলি Row-এর দ্বারা নির্ধারিত সম্পূর্ণ উচ্চতায় প্রসারিত হয় এবং সমান অংশ নেয়। এই পদ্ধতিটি আনুপাতিক বিতরণ সহ কলাম-ভিত্তিক লেআউট তৈরির জন্য সুবিধাজনক।

উদাহরণ 2 সাইডবার এবং মূল বিষয়বস্তু সহ একটি লেআউট তৈরি করতে বিভিন্ন flex ফ্যাক্টর ব্যবহার দেখায়।

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('সাইডবার'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('সামগ্রী এলাকা'),
        ),
      ),
    ),
  ],
)

দ্বিতীয় উদাহরণটি সাইডবার (25%) এবং মূল বিষয়বস্তু এলাকা (75%) সহ একটি সাধারণ লেআউট তৈরি করে। flex=1 এবং flex=3 1:3 অনুপাত দেয়। যখন স্ক্রিনের প্রস্থ পরিবর্তিত হয়, অনুপাতগুলি স্বয়ংক্রিয়ভাবে সংরক্ষিত হয় — এটি প্রতিক্রিয়াশীল ইন্টারফেসের ভিত্তি।

সংক্ষেপে: বিভিন্ন flex ফ্যাক্টর সহ Expanded প্রতিক্রিয়াশীল লেআউট তৈরির জন্য একটি আদর্শ হাতিয়ার। Column-এ Expanded-এর সংমিশ্রণ অনুভূমিক এবং উল্লম্ব উভয় আনুপাতিক বিন্যাস তৈরি করতে দেয়।

Expanded ব্যবহার করার সময় সাধারণ ভুল

ভুল 1: Row, Column বা Flex-এর বাইরে Expanded ব্যবহার করা। যদি আপনি Expanded সরাসরি Stack, ListView বা অন্য কোনো অ-Flex কন্টেইনারে রাখেন, Flutter একটি LayoutException ছুঁড়ে দেয় যার বার্তা "Expanded widgets must be placed inside Flex widgets"। সমাধান: প্যারেন্ট উইজেট পরীক্ষা করুন — শুধুমাত্র Row, Column বা Flex।

ভুল 2: shrinkWrap উল্লেখ না করে ListView-এর ভিতরে Expanded রাখা। ListView-এর ডিফল্টরূপে স্ক্রোল দিক方向上 অসীম উচ্চতা থাকে এবং Expanded তার অংশ গণনা করতে পারে না। সমাধান: shrinkWrap: true ব্যবহার করুন বা ListView-কে নির্দিষ্ট উচ্চতার SizedBox-এ মোড়ান।

ভুল 3: মোট flex সহ একাধিক Expanded উপলব্ধ স্থান অতিক্রম করা। যদি সীমিত প্রস্থের Row-তে Expanded-এর পাশাপাশি বড় অন্তর্নিহিত আকারের উইজেট থাকে, ওভারফ্লো হতে পারে। সমাধান: অদম্য শিশুদের ন্যূনতম আকার পরীক্ষা করুন এবং প্রয়োজন হলে FittedBox বা Flex fit ব্যবহার করুন।

ভুল 4: Row-এর ভিতরে Column-এ নেস্টেড Expanded। যদি Column-এর ভিতরে একটি Expanded Row-এর ভিতরে আরেকটি Expanded ধারণ করে, constraints সংঘর্ষ দেখা দিতে পারে। সমাধান: নেস্টিং গভীরতা সীমিত করুন বা মধ্যবর্তী স্তরে স্পষ্টভাবে মাত্রা নির্ধারণ করতে ConstrainedBox ব্যবহার করুন।

সংক্ষেপে: Expanded-এর সঠিক প্যারেন্ট প্রসঙ্গ প্রয়োজন। সর্বদা পরীক্ষা করুন যে Expanded সরাসরি Row, Column বা Flex-এ রাখা হয়েছে, এবং স্পষ্ট মাত্রা ছাড়া নেস্টিং এড়িয়ে চলুন।