Widget — এটি কী, প্রকার এবং Flutter-এ গঠন

Flutter-এ Widget কী

Flutter-এ একটি Widget হল ইউজার ইন্টারফেসের একটি অংশের অপরিবর্তনীয় (immutable) বর্ণনা। প্রতিটি Widget-এ কনফিগারেশন বৈশিষ্ট্য থাকে: আকার, রঙ, অবস্থান, টেক্সট, ইভেন্ট হ্যান্ডলার এবং চাইল্ড Widget। Widget সরাসরি রেন্ডার হয় না — এগুলি ব্লুপ্রিন্ট যার ভিত্তিতে Flutter Engine একটি RenderObject তৈরি করে, যা স্ক্রিনের প্রকৃত গ্রাফিক্যাল অবজেক্ট।

Flutter-এর দর্শন বলে: “Everything is a Widget”। এর অর্থ হল শুধু দৃশ্যমান উপাদান (Text, Image, Button) নয়, বরং কাঠামোগত ব্লক (Padding, Center, Column, Stack), আচরণগত ব্লক (GestureDetector, AnimatedBuilder) এবং এমনকি অ্যাপ্লিকেশন নিজেই (MaterialApp, CupertinoApp) Widget। এই পদ্ধতি একরূপতা নিশ্চিত করে: যেকোনো স্ক্রিন উপাদানকে সরল নেস্টিংয়ের মাধ্যমে অন্যটির সাথে যুক্ত করা যায়।

Google I/O 2024 — Flutter Widgets Deep Dive অনুসারে, Flutter-এ গড় অ্যাপ্লিকেশনে যেকোনো সময় 200 থেকে 1500 Widget থাকে। এই পরিমাণ সত্ত্বেও, Flutter C++ Skia/Impeller ইঞ্জিন স্তরে অপ্টিমাইজেশনের কারণে বাজেট ডিভাইসেও 60 FPS বজায় রাখে। Widget হালকা অবজেক্ট (প্রতিটি 40–80 বাইট), তাই এগুলি তৈরি করা পারফরম্যান্সের বাধা নয়।

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('হ্যালো, Flutter!'),
        ),
      ),
    );
  }
}

Flutter-এর তিনটি ট্রি: Widget, Element এবং RenderObject

Widget কীভাবে কাজ করে তা বুঝতে, তিনটি আন্তঃসংযুক্ত ট্রি নিয়ে গঠিত Flutter আর্কিটেকচার বোঝা প্রয়োজন। প্রথমটি — Widget ট্রি — UI কনফিগারেশন বর্ণনা করে। এটি একটি হালকা ট্রি যা প্রতিটি ফ্রেমে সম্পূর্ণরূপে পুনর্নির্মিত হতে পারে (গার্বেজ কালেক্টর পুরানো Widget সরিয়ে নতুন তৈরি করে)। Widget অপরিবর্তনীয় (immutable): যদি টেক্সটের রঙ পরিবর্তিত হয়, নতুন রঙের সাথে একটি নতুন Text Widget তৈরি হয়, পুরানোটি বাতিল হয়।

দ্বিতীয় ট্রি — Element ট্রি — Widget এবং RenderObject-এর মধ্যে সংযোগ। Element-এ Widget (কনফিগারেশন) এবং RenderObject (রেন্ডারিং)-এর রেফারেন্স থাকে। যখন একটি Widget পরিবর্তিত হয়, Flutter নতুন Widget-কে পুরানো Element-এর সাথে তুলনা করে এবং সিদ্ধান্ত নেয়: বিদ্যমান RenderObject আপডেট করবে (যদি Widget একই প্রকারের হয়) অথবা নতুন তৈরি করবে (যদি Widget প্রকার পরিবর্তিত হয়)। এই প্রক্রিয়াটিকে Reconciliation বলা হয় এবং এটি React Virtual DOM-এর অনুরূপ।

তৃতীয় ট্রি — RenderObject ট্রি — স্ক্রিনে প্রকৃত রেন্ডারিংয়ের জন্য দায়ী। RenderObject-এ নির্দিষ্ট আকার, অবস্থান এবং পেইন্ট পদ্ধতি থাকে। Flutter Engine (C++ Skia বা Impeller) RenderObject ট্রি ট্রাভার্স করে এবং প্রতিটি নোড রেন্ডার করে। RenderObject ট্রি সবচেয়ে ভারী, তাই Flutter একই প্রকারের Widget-এ সুইচ করার সময় RenderObject পুনঃব্যবহার করে এর পরিবর্তনগুলি হ্রাস করে।

StatelessWidget বনাম StatefulWidget

Flutter Widget-কে দুটি মৌলিক প্রকারে বিভক্ত করে: StatelessWidget এবং StatefulWidget। StatelessWidget এমন একটি উইজেট যাতে পরিবর্তনীয় অবস্থা থাকে না। StatelessWidget-এর চেহারা সম্পূর্ণরূপে এর কনস্ট্রাক্টর দ্বারা নির্ধারিত হয় এবং রেন্ডার করার পরে পরিবর্তিত হতে পারে না। উদাহরণ: Text, Icon, Divider, Padding। StatelessWidget-এর সমস্ত বৈশিষ্ট্য কনস্ট্রাক্টরে final হিসেবে ঘোষণা করা হয় এবং শুধুমাত্র পঠনযোগ্য।

StatefulWidget পরিবর্তনীয় অবস্থাসহ একটি উইজেট। এটি দুটি শ্রেণী নিয়ে গঠিত: Widget নিজেই (অপরিবর্তনীয় কনফিগারেশন, StatelessWidget-এর মতো) এবং State (পরিবর্তনীয় অবস্থা)। Widget-কে State থেকে আলাদা করা Flutter-এর একটি মূল আর্কিটেকচারাল সিদ্ধান্ত। Widget প্রতিটি build-এ পুনর্নির্মিত হয়, কিন্তু State অবজেক্ট ট্রিতে উইজেটের পুরো জীবনচক্র জুড়ে টিকে থাকে, তার অবস্থা বজায় রাখে।

যখন setState() কল করা হয়, Flutter State-কে “নোংরা” হিসেবে চিহ্নিত করে এবং পরবর্তী ফ্রেমে সাবট্রি পুনর্নির্মাণের জন্য build() পদ্ধতি কল করে। গুরুত্বপূর্ণ: setState() Widget নিজে পুনর্নির্মিত করে না — এটি শুধু বিদ্যমান State-এ build() কল ট্রিগার করে। এর অর্থ হল StatefulWidget চাইল্ড Widget-এর অবস্থা না হারিয়ে UI আপডেট করতে পারে, যতক্ষণ চাইল্ড উপাদানের কী (Key) স্থিতিশীল থাকে।

// StatelessWidget — চেহারা কখনো পরিবর্তন হয় না
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('হ্যালো, $name');
  }
}

// StatefulWidget — পরিবর্তনীয় অবস্থাসহ কাউন্টার
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('গণনা: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('বৃদ্ধি'),
        ),
      ],
    );
  }
}

Widget-এর প্রকার: layout, painting, interactive

Flutter-এ সমস্ত Widget কার্যকরী উদ্দেশ্য অনুসারে তিনটি প্রধান শ্রেণীতে বিভক্ত করা যেতে পারে। Layout Widget — স্ক্রিনে চাইল্ড উপাদানের অবস্থানের জন্য দায়ী। Row এবং Column বাচ্চাদের একটি লাইনে সাজায়, Stack একটিকে অপরটির উপরে রাখে, Expanded এবং Flexible উপলব্ধ স্থান বিতরণ করে। Layout Widget-এর নিজস্ব কোনো ভিজ্যুয়াল উপস্থাপনা নেই — এগুলি চাইল্ড উইজেটের অবস্থান এবং আকার পরিচালনা করে।

Painting Widget — ভিজ্যুয়াল স্টাইলিংয়ের জন্য দায়ী। Container সাজসজ্জা (রঙ, গ্রেডিয়েন্ট, ছায়া, সীমানা) লেআউট বৈশিষ্ট্যের সাথে একত্রিত করে। Padding স্পেসিং যোগ করে, DecoratedBox ব্যাকগ্রাউন্ড আঁকে, Transform রূপান্তর (ঘূর্ণন, স্কেল) প্রয়োগ করে। Painting Widget ভিজ্যুয়াল স্টাইলের বিল্ডিং ব্লক এবং প্রায়শই কাঙ্ক্ষিত চেহারা অর্জনের জন্য Layout Widget-এর সাথে ব্যবহার করা হয়।

Interactive Widget — ব্যবহারকারীর ইনপুট পরিচালনা করে। GestureDetector অঙ্গভঙ্গি (ট্যাপ, সোয়াইপ, পিঞ্চ) সনাক্ত করে, InkWell Material রিপল ইফেক্ট যোগ করে, TextField টেক্সট ইনপুট গ্রহণ করে, Slider এবং Switch মানক নিয়ন্ত্রণ উপাদান সরবরাহ করে। Interactive Widget কলব্যাক ফাংশনের মাধ্যমে ইভেন্ট উত্থাপন করে যা কনস্ট্রাক্টরে পাস করা হয় বা অবস্থা প্রদানকারীদের মাধ্যমে পরিচালিত হয়।

Flutter Widget of the Week (Google, 2025) অনুসারে, Flutter কমিউনিটি কার্যত যেকোনো ইন্টারফেস তৈরি করতে layout + painting + interactive Widget-এর সংমিশ্রণ সক্রিয়ভাবে ব্যবহার করে। উদাহরণস্বরূপ, একটি বোতাম: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout)। এই মডুলারিটি কোড পুনরাবৃত্তি ছাড়াই বিভিন্ন প্রসঙ্গে মানক ব্লক পুনঃব্যবহারের অনুমতি দেয়।

Widget কম্পোজিশন এবং BuildContext

Widget কম্পোজিশন — কিছু Widget-কে অন্যদের ভিতরে নেস্ট করে UI তৈরি করার প্রক্রিয়া। শাস্ত্রীয় উত্তরাধিকার (extends) এর বিপরীতে, যেখানে চাইল্ড ক্লাস প্যারেন্টের আচরণ উত্তরাধিকার সূত্রে পায়, Flutter সমষ্টিকরণ ব্যবহার করে: প্রতিটি Widget-এ child প্যারামিটার (একটির জন্য) বা children (একাধিকের জন্য) এর মাধ্যমে অন্যান্য Widget থাকে। এই পদ্ধতি বেশি নমনীয়তা এবং পুনঃব্যবহারযোগ্যতা প্রদান করে।

BuildContext Widget-এর পরে দ্বিতীয় সবচেয়ে গুরুত্বপূর্ণ ধারণা। BuildContext হল এলিমেন্ট ট্রিতে Widget-এর অবস্থানের একটি বর্ণনাকারী। BuildContext-এর মাধ্যমে, Widget পূর্বপুরুষ উইজেট (Theme.of(context), MediaQuery.of(context), Navigator.of(context)) অ্যাক্সেস করতে পারে। BuildContext build() পদ্ধতিতে পাস করা হয় এবং প্যারেন্ট ও চাইল্ড উপাদানের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়। প্রতিটি Widget-এর ঠিক একটি BuildContext থাকে, যা ট্রিতে তার অবস্থান স্বতন্ত্রভাবে সনাক্ত করে।

Flutter Architectural Overview (Google, 2025) অনুসারে, BuildContext হল InheritedWidget-এর ভিত্তি — একটি প্রক্রিয়া যা কনস্ট্রাক্টরের মাধ্যমে স্পষ্ট পাসিং ছাড়াই ট্রিতে নিচে ডেটা পাঠানোর অনুমতি দেয়। Theme, MediaQuery, Navigator এবং Provider ভিতরে InheritedWidget ব্যবহার করে। যেকোনো গভীরভাবে নেস্টেড Widget BuildContext.dependOnInheritedWidgetOfExactType-এর মাধ্যমে পূর্বপুরুষ ডেটা অ্যাক্সেস করতে পারে, যা BuildContext-কে Flutter-এর প্রতিক্রিয়াশীল আর্কিটেকচারের চাবিকাঠি করে তোলে।

// নেস্টিংয়ের মাধ্যমে Widget কম্পোজিশন
Scaffold(
  appBar: AppBar(title: const Text('আমার অ্যাপ')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Flutter-এ স্বাগতম',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('শুরু করুন'),
        ),
      ],
    ),
  ),
)

// BuildContext-এর মাধ্যমে থিম অ্যাক্সেস
Text(
  'স্টাইলযুক্ত টেক্সট',
  style: Theme.of(context).textTheme.headlineMedium,
)

Widget-এর সাথে সাধারণ ভুল

প্রথম এবং সবচেয়ে সাধারণ ভুল হল যেখানে StatelessWidget যথেষ্ট সেখানে StatefulWidget ব্যবহার করা। অনেক শিক্ষানবিস Flutter ডেভেলপার সব উইজেটের জন্য StatefulWidget তৈরি করে, এমনকি যখন অবস্থা বাহ্যিক প্রদানকারীতে (Provider, Riverpod, BLoC) সংরক্ষিত থাকে। এটি অপ্রয়োজনীয় এবং পারফরম্যান্স খারাপ করে। নিয়ম: StatelessWidget ব্যবহার করুন যদি অবস্থা বাহ্যিকভাবে পরিচালিত হয় বা যদি উইজেটের নিজস্ব পরিবর্তনীয় অবস্থা না থাকে।

দ্বিতীয় ভুল — const কনস্ট্রাক্টর ছাড়া build পদ্ধতির ভিতরে Widget তৈরি করা। const ছাড়া তৈরি প্রতিটি Widget প্রতিটি build-এ পুনরায় বরাদ্দ হয়। যদি আপনি build()-এর ভিতরে const কনস্ট্রাক্টর দিয়ে Widget তৈরি করেন, Flutter একই ইনস্ট্যান্স পুনঃব্যবহার করতে পারে, গার্বেজ কালেক্টরের উপর ভার কমায়। যেখানে সম্ভব const যোগ করুন — বিশেষ করে Text, Icon, SizedBox, Padding এবং অন্যান্য স্টেটলেস Widget-এর জন্য।

তৃতীয় ভুল — কী (Key) নিয়ে ভুল কাজ করা। Flutter ট্রি পুনর্নির্মাণের সময় Widget সনাক্ত করতে Key ব্যবহার করে। যদি Widget-এর তালিকা Key ছাড়া পুনর্নির্মিত হয়, Flutter উপাদানের ক্রম গুলিয়ে ফেলতে পারে, যার ফলে ভুল অ্যানিমেশন বা অবস্থা হারানো হয়। তালিকার উপাদানের জন্য সবসময় Key (যেমন ValueKey বা ObjectKey) যোগ করুন, বিশেষ করে গতিশীল ডেটার সাথে ListView.builder ব্যবহার করার সময়।