Flexible: এটি কী, কাজের নীতি এবং মোবাইল ডেভেলপমেন্টে কনফিগারেশন

Flexible কী

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

Flexible উপলব্ধ স্থান গণনা করতে Flutter-এর Flex অ্যালগরিদম ব্যবহার করে। প্রথমে, ফ্রেমওয়ার্ক সমস্ত অনমনীয় চাইল্ড (Flexible/Expanded ছাড়া উইজেট) জিজ্ঞাসাবাদ করে এবং তাদের অন্তর্নিহিত আকার গণনা করে। অবশিষ্ট স্থান নমনীয় চাইল্ডগুলির মধ্যে তাদের flex ফ্যাক্টর অনুপাতে বিভক্ত হয়। স্থান বরাদ্দের পরে, Flexible fit পরীক্ষা করে — যদি এটি loose হয়, চাইল্ড “বরাদ্দের চেয়ে বড় নয়” একটি সীমাবদ্ধতা পায়, যা এটিকে ছোট থাকতে দেয়।

Flexible-এর একটি বৈশিষ্ট্য: যদি চাইল্ড উইজেটের নিজস্ব ন্যূনতম আকার থাকে (উদাহরণস্বরূপ, দীর্ঘ স্ট্রিং সহ Text), তবে Flexible জোর করে প্রসারিত না করে অনুরোধকৃত স্থান বরাদ্দ করে। এটি Flexible-কে সেই উপাদানগুলির জন্য অপরিহার্য করে তোলে যাদের আকার কন্টেইনারের পরিবর্তে বিষয়বস্তু দ্বারা নির্ধারিত হওয়া উচিত।

সারসংক্ষেপ: Flexible ব্যবহার করুন যখন আপনি একটি উপাদানের জন্য স্থান সংরক্ষণ করতে চান কিন্তু এটিকে প্রসারিত করতে বাধ্য করতে চান না। এটি নমনীয় লেআউট বিতরণ বজায় রেখে বিষয়বস্তুর প্রাকৃতিক আকার সংরক্ষণ করে।

FlexFit.tight বনাম FlexFit.loose

FlexFit দুটি মানের একটি গণনা: tight এবং loose। fit-এর পছন্দ নির্ধারণ করে যে চাইল্ড উইজেটকে বরাদ্দকৃত স্থানের আকারে জোর করে প্রসারিত করা হবে কিনা।

FlexFit.tight: চাইল্ড এলিমেন্ট tight constraints পায় — ন্যূনতম এবং সর্বোচ্চ আকার বরাদ্দকৃত স্থানের সমান। চাইল্ডকে ঠিক ততটুকু স্থান দখল করতে হবে যতটুকু Flex অ্যালগরিদম বরাদ্দ করেছে। যদি চাইল্ড ছোট হয় — তবে এটি প্রসারিত হয়। যদি বড় হয় — তবে এটি সঙ্কুচিত হয়। আচরণ Expanded-এর মতোই।

FlexFit.loose: চাইল্ড এলিমেন্ট loose constraints পায় — ন্যূনতম আকার 0, সর্বোচ্চ বরাদ্দকৃত স্থানের সমান। চাইল্ড 0 থেকে সর্বোচ্চ পর্যন্ত যেকোনো আকারের হতে পারে। যদি চাইল্ড ছোট হয় (উদাহরণস্বরূপ, ছোট স্ট্রিং সহ Text), তবে এটি তার প্রাকৃতিক প্রস্থ দখল করে, এবং বাকি স্থান খালি থাকে।

সারসংক্ষেপ: FlexFit.loose টেক্সট ব্লক এবং প্রাকৃতিক আকারের উপাদানগুলির জন্য পছন্দ। FlexFit.tight কঠোর কলাম লেআউটের জন্য যেখানে সমস্ত উপাদানের একই প্রস্থ বা উচ্চতা থাকা উচিত।

কখন Expanded-এর পরিবর্তে Flexible ব্যবহার করবেন

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

Flexible-এর জন্য পরিস্থিতি: একটি Row-এর ভিতরে দুটি বাটন রয়েছে। প্রথমটি — “কিনুন” (ছোট টেক্সট), দ্বিতীয়টি — “কার্টে যোগ করুন” (দীর্ঘ টেক্সট)। Expanded-এর সাথে, উভয় বাটন সমান প্রস্থে প্রসারিত হয়, এবং ছোট টেক্সটে বিশাল প্যাডিং থাকবে। Flexible-এর সাথে, প্রতিটি বাটন তার টেক্সটের প্রস্থ নেয়, এবং খালি স্থান তাদের মধ্যে বা প্রান্তে থাকে।

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

সারসংক্ষেপ: Flexible চয়ন করুন যখন বিষয়বস্তু উপাদানের আকার নির্ধারণ করে এবং এর চারপাশে খালি স্থান গ্রহণযোগ্য। Expanded চয়ন করুন যখন সমস্ত উপাদানের আকার বিষয়বস্তু নির্বিশেষে একই হওয়া উচিত।

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

উদাহরণ 1 একটি Row-এ FlexFit.loose সহ Flexible-এর মৌলিক ব্যবহার প্রদর্শন করে।

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('ছোট'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('ডেমোর জন্য লম্বা টেক্সট'),
      ),
    ),
  ],
)

উদাহরণে, উভয় Flexible loose fit ব্যবহার করে। ছোট টেক্সট সহ প্রথম কন্টেইনার তার প্রাকৃতিক প্রস্থ দখল করে। দীর্ঘ টেক্সট সহ দ্বিতীয়টি — তার নিজস্ব প্রস্থ। Row প্রতিটিকে অর্ধেক উপলব্ধ প্রস্থ বরাদ্দ করে, কিন্তু loose fit কন্টেইনারগুলিকে ছোট হতে দেয়, এবং খালি স্থান তাদের মধ্যে খালি থাকে।

উদাহরণ 2 — একটি Column-এ Tight এবং Loose fit সহ Flexible-এর তুলনা।

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — সম্পূর্ণ উচ্চতা প্রসারিত'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — প্রাকৃতিক উচ্চতা'),
        ),
      ),
    ),
  ],
)

Column-এ, প্রথম Flexible (tight) কার্ডটিকে অর্ধেক উপলব্ধ উচ্চতায় প্রসারিত করে। দ্বিতীয় Flexible (loose) — কার্ডটি তার বিষয়বস্তু অনুযায়ী উচ্চতা নেয়, এবং বাকি স্থান খালি থাকে। দৃশ্যত, আপনি দেখতে পাবেন কিভাবে tight জোর করে এলাকা পূর্ণ করে, যখন loose একটি কম্প্যাক্ট আকার সংরক্ষণ করে।

সারসংক্ষেপ: প্রোডাকশন কোডে, Flexible loose ফর্ম ফিল্ড, বাটন এবং টেক্সট ব্লকের জন্য ব্যবহৃত হয়। Flexible tight Expanded-এর সমতুল্য এবং সমান বিতরণের জন্য ব্যবহৃত হয়।

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

ভুল 1: Flex কন্টেইনারের বাইরে Flexible ব্যবহার করা। Expanded-এর মতো, Flexible LayoutException নিক্ষেপ করে যদি Row, Column বা Flex-এর ভিতরে না থাকে। সমাধান: সবসময় প্যারেন্ট উইজেট চেইন পরীক্ষা করুন।

ভুল 2: Flexible এবং Expanded নিয়ে বিভ্রান্তি। ডেভেলপাররা প্রায়শই Expanded ব্যবহার করেন যখন Flexible loose fit প্রয়োজন, এবং বিপরীত। ফলাফল: Expanded ছোট টেক্সট সহ একটি উপাদানকে প্রসারিত করে, বড় খালি মার্জিন তৈরি করে। সমাধান: যদি উপাদানের আকার বরাদ্দের চেয়ে ছোট হতে পারে — তাহলে Flexible(fit: FlexFit.loose) ব্যবহার করুন।

ভুল 3: শূন্য flex ফ্যাক্টর। Flexible flex=0 সহ একটি অনমনীয় উইজেটের মতো আচরণ করে, যা স্বজ্ঞাত নাও হতে পারে। ডেভেলপার নমনীয় আচরণ আশা করে, কিন্তু উপাদান ন্যূনতম আকার দখল করে। সমাধান: সক্রিয় স্থান বিতরণের জন্য flex ≥1 হওয়া উচিত।

ভুল 4: আকার সীমাবদ্ধতা ছাড়া ScrollView-এর ভিতরে Flexible। যদি Flexible SingleChildScrollView-এর ভিতরে Column-এ থাকে, স্ক্রোল কন্টেইনার অসীম স্থান প্রদান করে, এবং flex বিতরণ কাজ করে না। সমাধান: SizedBox বা ConstrainedBox ব্যবহার করে স্ক্রোল কন্টেইনারের আকার সীমাবদ্ধ করুন।

সারসংক্ষেপ: Flexible-এর Expanded-এর মতো প্যারেন্ট কনটেক্সটে একই মনোযোগ প্রয়োজন। একমাত্র পার্থক্য হল fit — কাজ অনুযায়ী এটি সচেতনভাবে চয়ন করুন।