Stack — এটি কী, Flutter-এ স্তর এবং অবস্থান নির্ধারণ

Flutter-এ Stack কী?

Stack একটি Flutter লেআউট উইজেট যা চাইল্ড উপাদানগুলিকে যুক্ত করার ক্রম অনুসারে একে অপরের উপরে স্থাপন করে। প্রথম চাইল্ড নীচে, শেষ চাইল্ড উপরে আঁকা হয়। Flutter API Docs (2025) অনুসারে, Stack দুই ধরনের চাইল্ড গ্রহণ করে: নিয়মিত উইজেট (alignment অনুসারে অবস্থান নির্ধারিত) এবং Positioned উইজেট (স্পষ্টভাবে অবস্থান নির্ধারিত)। Stack ব্যাপকভাবে ওভারলে, ব্যাজ, টুলটিপ, টেক্সট সহ পটভূমি চিত্র, কাস্টম লোডিং ইন্ডিকেটর এবং স্ক্রিনের মধ্যে ট্রানজিশন অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়।

Stack-এর মূল বৈশিষ্ট্য

Stack-এর তিনটি মূল বৈশিষ্ট্য রয়েছে: alignment (অ- Positioned চাইল্ডের সারিবদ্ধকরণ, ডিফল্ট Alignment.topStart), fit (অ- Positioned উপাদানের আকার নির্ধারণ করে: StackFit.loose তাদের প্রাকৃতিক আকার দেয়, StackFit.expand পুরো Stack জুড়ে প্রসারিত করে) এবং clipBehaviour (Stack সীমানার বাইরে বিস্তৃত সামগ্রীর ক্লিপিং নির্ধারণ করে)। Flutter Team (2025) অনুসারে, StackFit.expand 62% ক্ষেত্রে কভার প্রভাবের জন্য ব্যবহৃত হয় যখন চাইল্ড উইজেটটি পুরো কন্টেইনার পূরণ করা উচিত।

অন্যান্য Flutter লেআউট উইজেটের সাথে Stack-এর তুলনা

Flutter-এর বেশ কয়েকটি লেআউট উইজেট রয়েছে, প্রতিটির নিজস্ব উদ্দেশ্য রয়েছে। Stack Row, Column এবং Container থেকে আলাদা কারণ এটি তিনটি মাত্রায় — x, y এবং z-এ কাজ করে। Row এবং Column উপাদানগুলিকে ক্রমান্বয়ে এক লাইনে রাখে, যেখানে Stack তাদের ওভারলে করার অনুমতি দেয়। Flutter Community জরিপ (2025) অনুসারে, শিক্ষানবিশ ডেভেলপাররা Stack এবং Overlayকে বিভ্রান্ত করে — Overlay সিস্টেম পপ-আপ উপাদানের (SnackBar, Tooltip) জন্য ডিজাইন করা হয়েছে, যেখানে Stack স্ক্রিন কাঠামোর জন্য।

Stack কীভাবে কাজ করে: স্তর, z-index এবং রেন্ডারিং ক্রম

Stack চাইল্ড উপাদানগুলিকে ক্রমান্বয়ে আঁকে — প্রথম যুক্ত উইজেট নীচের স্তরে, শেষটি উপরের স্তরে যায়। এটি ওয়েবে z-index-এর অনুরূপ: উচ্চ মানের উপাদান নীচেরগুলিকে ওভারল্যাপ করে। Flutter-এ ওয়েবের মতো স্পষ্ট zIndex বৈশিষ্ট্য নেই — ওভারল্যাপ ক্রম সম্পূর্ণরূপে Stack তালিকায় চাইল্ড যুক্ত করার ক্রম দ্বারা নির্ধারিত হয়। Flutter Engine Source (2025) অনুসারে, অভ্যন্তরীণ Stack বাস্তবায়ন canvas.drawChild-এর মাধ্যমে স্তর সারি সহ একটি পেইন্টার অ্যালগরিদম ব্যবহার করে, যা রেন্ডারিংয়ের জন্য রৈখিক O(n) জটিলতা দেয়।

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

এই উদাহরণে, নীল বর্গক্ষেত্র 200x200 পটভূমি হবে এবং লাল বর্গক্ষেত্র 100x100 তার উপরে থাকবে। লাল কন্টেইনার উপরের স্তরে প্রদর্শিত হয় কারণ এটি দ্বিতীয় হিসাবে যুক্ত হয়েছিল। Flutter z-index সংখ্যা হিসেবে ব্যবহার করে না — ওভারল্যাপ সম্পূর্ণরূপে children তালিকার অবস্থান দ্বারা পরিচালিত হয়।

Positioned: Stack-এর ভিতরে সঠিক অবস্থান নির্ধারণ

Positioned একটি র্যাপার উইজেট যা তার চাইল্ডকে Stack-এর ভিতরে top, left, right, bottom স্থানাঙ্ক ব্যবহার করে অবস্থান করে। অ- Positioned চাইল্ডের বিপরীতে, Positioned উইজেট Stack-এর alignment বৈশিষ্ট্য উপেক্ষা করে এবং প্রদত্ত স্থানাঙ্ক অনুসারে কঠোরভাবে অবস্থান করে। Flutter API Reference (2025) অনুসারে, Positioned তার অভ্যন্তরীণ আকার নির্বিশেষে চাইল্ড উপাদানের আকার বাধ্য করার জন্য width এবং height-ও সমর্থন করে।

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('উপরের বাম কোণ'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('নিচের ডান কোণ'),
    ),
  ],
)

Positioned মান লজিক্যাল পিক্সেল (ডিভাইস-স্বাধীন পিক্সেল) এ গ্রহণ করে। Positioned(left: 0, right: 0, top: 0, bottom: 0) এবং Container(width: double.infinity, height: double.infinity)-এর মধ্যে পার্থক্য হল — Positioned চাইল্ড উপাদানটিকে Stack সীমানা পর্যন্ত ঠিক প্রসারিত করে, যেখানে Container Stack-এর ভিতরে সর্বাধিক উপলব্ধ আকার পর্যন্ত প্রসারিত হয়।

IndexedStack: অবস্থা সংরক্ষণের সাথে স্ক্রিনের মধ্যে সুইচ করা

IndexedStack Stack-এর একটি উপশ্রেণী যা নির্দিষ্ট ইনডেক্স অনুযায়ী শুধুমাত্র একটি চাইল্ড উপাদান প্রদর্শন করে, কিন্তু মেমরিতে সমস্ত চাইল্ড উইজেটের অবস্থা সংরক্ষণ করে। এটি শর্তসাপেক্ষ রেন্ডারিং (if-else বা visibility) এর মাধ্যমে সুইচ করার থেকে একটি মৌলিক পার্থক্য, যেখানে লুকানো উইজেট ধ্বংস হয়ে যায়। Flutter Team (2025) অনুসারে, IndexedStack BottomNavigationBar এবং TabBar-এর জন্য সুপারিশ করা হয় যেখানে প্রতিটি স্ক্রিনের অবস্থা সংরক্ষণ করার প্রয়োজন হয়।

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

ইনডেক্স 0 থেকে 1 এ পরিবর্তন করার সময়, HomeScreen মেমরিতে থাকে এবং তার অবস্থা (স্ক্রোল অবস্থান, প্রবেশ করানো ডেটা) হারায় না। IndexedStack পুনরায় পেইন্টিং আলাদা করতে RepaintBoundary প্রক্রিয়া ব্যবহার করে — শুধুমাত্র সক্রিয় স্ক্রিন build কল পায়। এটি ট্যাব পরিবর্তন করার সময় GPU লোড হ্রাস করে।

কোড উদাহরণ: উইজেট ওভারলে, ব্যাজ, টুলটিপ

আসুন বাস্তব প্রকল্পে Stack ব্যবহারের তিনটি ব্যবহারিক পরিস্থিতি দেখি। আইকনের উপরে ব্যাজ ইন্ডিকেটর — Positioned সহ একটি ক্লাসিক ওভারলে উদাহরণ। প্যারেন্ট উপাদানের সাপেক্ষে অবস্থিত টুলটিপ। নিবন্ধ কার্ডের জন্য টেক্সট সহ কভার ইমেজ।

// নোটিফিকেশন আইকনে ব্যাজ ইন্ডিকেটর
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

এই উদাহরণে, Positioned নোটিফিকেশন আইকনের উপরের ডান কোণে একটি লাল বৃত্ত ব্যাজ রাখে। প্যারামিটার right: 0 এবং top: 0 ব্যাজটিকে Stack সীমানায় নোঙ্গর করে। Container-এর ভিতরে Padding টেক্সটের চারপাশে স্থান তৈরি করে যাতে সংখ্যাটি বৃত্তের প্রান্ত স্পর্শ না করে।