setState, InheritedWidget এবং Provider এর ব্যবহার

Flutter এ setState, InheritedWidget, এবং Provider হলো স্টেট ম্যানেজমেন্টের বিভিন্ন পদ্ধতি যা অ্যাপ্লিকেশনের স্টেট বা ডেটা পরিচালনা করতে ব্যবহার করা হয়। এগুলো বিভিন্ন পরিস্থিতিতে উপযোগী এবং কার্যকর। নিচে প্রতিটি পদ্ধতির ব্যবহার, ব্যাখ্যা, এবং উদাহরণ বিস্তারিতভাবে আলোচনা করা হলো।

১. setState:

• setState হলো Flutter এ Stateful Widget এর স্টেট ম্যানেজমেন্টের সবচেয়ে সাধারণ পদ্ধতি। এটি ব্যবহার করে আপনি Widget এর স্টেট পরিবর্তন করে UI আপডেট করতে পারেন।
• যখন আপনি setState মেথড কল করেন, তখন এটি নতুন ভ্যালু দিয়ে স্টেট আপডেট করে এবং UI পুনরায় রেন্ডার হয়।

setState এর উদাহরণ:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'setState Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pressed the button this many times:'),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

• এখানে CounterWidget এর _incrementCounter মেথড setState কল করে _counter ভ্যারিয়েবল আপডেট করে এবং UI পুনরায় রেন্ডার হয়।

২. InheritedWidget:

• InheritedWidget হলো Flutter এর একটি লো-লেভেল স্টেট ম্যানেজমেন্ট পদ্ধতি, যা ডেটা বা স্টেটকে Widget ট্রি এর মাধ্যমে শেয়ার করতে ব্যবহৃত হয়।
• এটি এমন একটি Widget যা Child Widget গুলোকে ডেটা প্রদান করতে পারে, এবং যদি ডেটা পরিবর্তিত হয়, তাহলে প্রয়োজনীয় Child Widget গুলো আপডেট হয়।

InheritedWidget এর উদাহরণ:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'InheritedWidget Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('InheritedWidget Demo'),
        ),
        body: CounterProvider(
          counter: 0,
          child: CounterDisplay(),
        ),
      ),
    );
  }
}

class CounterProvider extends InheritedWidget {
  final int counter;

  CounterProvider({required this.counter, required Widget child})
      : super(child: child);

  static CounterProvider? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterProvider>();
  }

  @override
  bool updateShouldNotify(CounterProvider oldWidget) {
    return oldWidget.counter != counter;
  }
}

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = CounterProvider.of(context)?.counter ?? 0;
    return Center(
      child: Text(
        'Counter value: $counter',
        style: Theme.of(context).textTheme.headline4,
      ),
    );
  }
}

• এখানে CounterProvider একটি InheritedWidget, যা counter ভ্যালু Child Widget গুলোকে সরবরাহ করে।
• CounterDisplay Widget এ CounterProvider.of(context) ব্যবহার করে ডেটা অ্যাক্সেস করা হয়েছে।

দ্রষ্টব্য: InheritedWidget সাধারণত সরাসরি ব্যবহার না করে Provider এর মত প্যাকেজ ব্যবহার করা হয়, যা আরো সহজ ও কার্যকর স্টেট ম্যানেজমেন্ট পদ্ধতি প্রদান করে।

৩. Provider:

• Provider হলো Flutter এ একটি জনপ্রিয় স্টেট ম্যানেজমেন্ট প্যাকেজ, যা InheritedWidget এর উপর ভিত্তি করে তৈরি। এটি সহজে ডেটা শেয়ার এবং ম্যানেজ করতে সহায়তা করে।
• Provider একটি ডেটা বা স্টেট তৈরি করে এবং Widget ট্রি এর মাধ্যমে সরবরাহ করে। এটি সহজে UI আপডেট করতে এবং ডেটা শেয়ার করতে ব্যবহৃত হয়।
• pubspec.yaml ফাইলে provider প্যাকেজ যোগ করুন:

dependencies:
  provider: ^6.0.0

Provider এর উদাহরণ:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Provider Demo'),
        ),
        body: CounterWidget(),
      ),
    );
  }
}

class Counter extends ChangeNotifier {
  int _value = 0;

  int get value => _value;

  void increment() {
    _value++;
    notifyListeners();
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Counter value: ${counter.value}'),
          ElevatedButton(
            onPressed: counter.increment,
            child: Text('Increment'),
          ),
        ],
      ),
    );
  }
}

• এখানে Counter ক্লাস একটি ChangeNotifier, যা ডেটা পরিবর্তিত হলে notifyListeners() মেথড কল করে।
• ChangeNotifierProvider ব্যবহার করে Counter এর ইনস্ট্যান্স অ্যাপের বাকি অংশে সরবরাহ করা হয়েছে।
• Provider.of<Counter>(context) ব্যবহার করে CounterWidget এ ডেটা অ্যাক্সেস এবং আপডেট করা হয়েছে।

Provider এর সুবিধা:

• সহজ স্টেট ম্যানেজমেন্ট: Provider স্টেট ম্যানেজমেন্টকে সহজ করে তোলে এবং কোডকে পরিষ্কার রাখে।
• Reactive Programming: ChangeNotifier ব্যবহার করে UI আপডেট সহজে করা যায় যখন ডেটা পরিবর্তিত হয়।
• ডেটা শেয়ার করা সহজ: Widget ট্রি এর মাধ্যমে সহজেই ডেটা শেয়ার করা যায়।

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

• setState: ছোট বা সরল Stateful Widget গুলোর ক্ষেত্রে দ্রুত স্টেট আপডেট করতে ব্যবহার করা যায়।
• InheritedWidget: যখন স্টেট বা ডেটা একটি Widget ট্রি এর মাধ্যমে শেয়ার করতে হয় এবং আপনি কম লেভেল স্টেট ম্যানেজমেন্ট ব্যবহার করতে চান।
• Provider: বড় এবং জটিল অ্যাপ্লিকেশনের জন্য বা যখন ডেটা অনেক জায়গায় শেয়ার করতে হয়। এটি Flutter এ স্টেট ম্যানেজমেন্টের জন্য সবচেয়ে জনপ্রিয় এবং কার্যকর সমাধান।

এই তিনটি পদ্ধতি Flutter অ্যাপের স্টেট ম্যানেজমেন্টে গুরুত্বপূর্ণ ভূমিকা পালন করে। আপনি আপনার অ্যাপের জটিলতা এবং প্রয়োজন অনুযায়ী একটি পদ্ধতি বেছে নিতে পারেন।