Stateless এবং Stateful Widget — Flutter Widgets এর Lifecycle নিয়ে বিস্তারিত আলোচনা

Flutter ইকোসিস্টেমে Stateful এবং Stateless Widget হচ্ছে User Interface (UI) তৈরি করার দুটি প্রধান উপাদান। একজন Flutter ডেভেলপার হিসেবে, আপনি কখন এবং কীভাবে এই দুটি উইজেট ব্যবহার করবেন এবং তাদের Lifecycle কেমন তা জানা অত্যন্ত গুরুত্বপূর্ণ। এই ব্লগে, আমরা Stateful এবং Stateless Widget-এর পার্থক্য এবং তাদের লাইফসাইকেল নিয়ে বিস্তারিত আলোচনা করব।

Stateless Widget

Stateless Widget এমন একটি UI কম্পোনেন্ট যা পরিবর্তন হয় না বা কোনো state রাখে না। এটি একবার রান হলে, Flutter এই Widget-এর জন্য নতুন কোনো state পরিবর্তনের প্রয়োজন মনে করে না।

উদাহরণ:

• Button
• Icon
• Text

Stateless Widget-এর Lifecycle:

Stateless Widget-এর Lifecycle খুবই সোজা এবং তিনটি ধাপে বিশ্লেষণ করা যায়:

1. Constructor:

• যখন কোনও Stateless Widget প্রথমবার রান হয়, তখন Flutter এর UI রেন্ডারিং সিস্টেম এই widget-এর constructor কল করে। এটি widget এর প্রয়োজনীয় ডেটা (যেমন প্রোপার্টি) ইনিশিয়ালাইজ করতে ব্যবহৃত হয়।
• এই Constructor-এ প্রয়োজনীয় Data বা Properties পাস করা হয়।

1. build() Method:

• এটি Stateless Widget-এর একমাত্র গুরুত্বপূর্ণ Method।
• Flutter এই Method কল করে UI রেন্ডার করার জন্য।
• Stateless Widget কোনো পরিবর্তন হলে সম্পূর্ণ নতুন করে রান হয় এবং build() Method পুনরায় কল হয়।

1. Destruction:

• উইজেট ব্যবহার শেষে Garbage Collector এটি মেমোরি থেকে মুছে ফেলে।

উদাহরণ:

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(title);
  }
}

Stateful Widget

Stateful Widget এমন একটি UI কম্পোনেন্ট যা পরিবর্তনশীল state ওউন করে। এটি runtime-এ পরিবর্তিত state অনুযায়ী UI আপডেট করতে পারে।

উদাহরণ:

• Checkbox
• Slider
• TextField

Stateful Widget-এর Lifecycle:

Stateful Widget-এর Lifecycle Stateless Widget-এর তুলনায় অনেক বেশি জটিল। তাই এটা বুঝতে একটু সমস্যা হতে পারে। এর দুটি অংশ থাকে — Widget এবং State। তাই বলা যায়, এর Lifecycle দুই ভাগে বিভক্ত:

Widget Lifecycle:

Constructor:

• যখন কোনও Stateful Widget প্রথমবার রান হয়, তখন Flutter এর UI রেন্ডারিং সিস্টেম এই widget-এর constructor কল করে। এটি widget এর প্রয়োজনীয় ডেটা (যেমন প্রোপার্টি) ইনিশিয়ালাইজ করতে ব্যবহৃত হয়।

createState() Method:

• এই method কল করার মাধ্যমে, Flutter সেই Stateful Widget এর জন্য একটি নতুন State ইনস্ট্যান্স তৈরি করে।
• createState() method শুধুমাত্র Stateful Widget-এর জন্যই ব্যবহৃত হয়।

1. State Lifecycle:

initState():

• প্রথমবার Widget রান হওয়ার সময় এটি কল হয়। এটি শুধুমাত্র একবারই কল হয়।
• API কল বা এক্সটার্নাল ডাটা ফেচ করার জন্য এটি জরুরী।

didChangeDependencies():

• যখন Widget-এর কোনো ডিপেন্ডেন্সি পরিবর্তন হয়, তখন এটি কল হয়।
• এটি মূলত Inherited Widget-এর সাথে কাজ করে।

build():

• Stateful Widget-এর UI রেন্ডার করার জন্য এটি কল করা হয়। এটি একবারের অধিক কল হতে পারে।
• State পরিবর্তন হলে Flutter এই Method পুনরায় কল করে।

setState():

• এটি State পরিবর্তন করার জন্য ব্যবহৃত হয়। এটি build() Method পুনরায় কল করে UI আপডেট করে।

deactivate():

• Widget Tree থেকে Stateful Widget সরানোর আগে এটি কল হয়।

dispose():

• উইজেট পারমানেন্টলি রিমুভের সময় এটি কল হয়।
• রিসোর্স ক্লিনআপের জন্য এটি ব্যবহৃত হয়।

উদাহরণ:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  @override
  void initState() {
    super.initState();
    print("Widget initialized");
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: \$counter'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              counter++;
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }

  @override
  void dispose() {
    print("Widget disposed");
    super.dispose();
  }
}

কখন কোন Widget ব্যবহার করবেন?

1. Stateless Widget ব্যবহার করুন যদি:

যদি widget-এর UI কোনো পরিবর্তন ছাড়া থাকে, অর্থাৎ UI একবার রেন্ডার হওয়ার পর এটি আর কোনোভাবে পরিবর্তিত হয় না, তখন Stateless Widget ব্যবহার করুন। যদি widget এর মধ্যে কোনো ইনপুট বা অ্যাকশন থেকে স্টেট পরিবর্তন করার প্রয়োজন না থাকে, তখন Stateless Widget উপযুক্ত।

1. Stateful Widget ব্যবহার করুন যদি:

যখন widget এর UI কোনো কারণে পরিবর্তিত হয়, যেমন ইউজার ইন্টারঅ্যাকশনের মাধ্যমে, তখন Stateful Widget ব্যবহার করা হয়।