মোবাইল ডেভেলপমেন্টে Flutter: এটি কী, মূল ধারণা এবং এটি কীভাবে কাজ করে

Flutter: Widget, StatelessWidget এবং StatefulWidget-এর মূল বিষয়

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

StatelessWidget বনাম StatefulWidget

StatelessWidget — build() একবার কল করা হয়। হেডার, আইকন, স্ট্যাটিক টেক্সটের জন্য উপযুক্ত। StatefulWidget — build() প্রতিবার setState() কল করার সময় কল করা হয়। ফর্ম, পরিবর্তনশীল তালিকা, টাইমারের জন্য উপযুক্ত। InheritedWidget — কন্সট্রাক্টরের মাধ্যমে স্পষ্টভাবে না পাঠিয়ে ডেটা নিচে পাঠানো। Theme, MediaQuery, Navigator — InheritedWidgets। BuildContext — ট্রিতে Widget-এর অবস্থান। context.of<T>, context.watch<T>, context.select<T,R> — InheritedWidget-এ অ্যাক্সেস।

// Flutter Widget উদাহরণ: setState সহ StatefulWidget
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — কনফিগারেশন। StatelessWidget — অপরিবর্তনীয়। StatefulWidget — setState() সহ পরিবর্তনীয়। IT Sectr StatelessWidget দিয়ে শুরু করার এবং শুধুমাত্র যখন স্টেট প্রয়োজন তখন StatefulWidget-এ সুইচ করার পরামর্শ দেয়।

ট্রি (Widget Tree, Element Tree, RenderObject Tree)

Flutter কার্যকর রেন্ডারিংয়ের জন্য তিনটি ট্রি ব্যবহার করে। Widget Tree — কনফিগারেশন ট্রি। Widgets ঘন ঘন তৈরি হয় (প্রতি build), হালকা। Element Tree — এলিমেন্ট ট্রি। প্রতি Widget-এ একটি এলিমেন্ট (যদি টাইপ না বদলায়)। Element — Widget এবং RenderObject-এর মধ্যে সেতু। RenderObject Tree — রেন্ডারিং ট্রি। আকার, অবস্থান, অঙ্কন পরিচালনা করে। RenderObject — ভারী, খুব কমই তৈরি হয়। Flutter Widget Tree তুলনা করে এবং Element Tree আপডেট করে, যা RenderObject Tree আপডেট ট্রিগার করে।

Keys এবং Element Tree

Key — Element Tree-তে Widget শনাক্তকারী। ValueKey, ObjectKey, UniqueKey, PageStorageKey। Keys Flutter-কে পুনর্নির্মাণের সময় পুরানো এবং নতুন Widgets মেলাতে দেয়। Keys ছাড়া, Flutter Widget টাইপ এবং অবস্থান অনুযায়ী মেলায়। GlobalKey — অন্য Widget থেকে State-এ অ্যাক্সেস। ব্যবহার করা হয়: জটিল ফর্ম, অ্যানিমেশন, টেস্টে State অ্যাক্সেসের জন্য। IT Sectr তালিকার (List.generate) জন্য Keys ব্যবহার করার এবং প্রয়োজন না হলে GlobalKey এড়ানোর পরামর্শ দেয়।

Expanded — Row/Column/Flex-এ উপলব্ধ স্থান পূরণকারী Widget। Flexible — পূরণ করতে বাধ্য করে না (ছোট হতে পারে)। MediaQuery — ডিভাইস তথ্য সহ InheritedWidget: স্ক্রিন সাইজ, ওরিয়েন্টেশন, প্ল্যাটফর্ম, টেক্সট স্কেল ফ্যাক্টর। Theme/ThemeData — কেন্দ্রীভূত থিম। Theme.of(context) — অ্যাক্সেস। MaterialApp — রাউটিং, থিম, লোকেল কনফিগারেশনের জন্য মূল Widget। Scaffold — AppBar, Drawer, BottomNavigationBar সহ মৌলিক লেআউট। AppBar — শীর্ষ প্যানেল।

নেভিগেশন (Navigator, Route)

Navigator — রুট স্ট্যাক (Routes)। Navigator.push — স্ক্রিন খুলুন (Future রিটার্ন করে)। Navigator.pop — বন্ধ করুন (ফলাফল সহ)। MaterialPageRoute — অ্যানিমেটেড ট্রানজিশন (ডান থেকে স্লাইড)। Named Routes — স্ট্রিং শনাক্তকারী। onGenerateRoute — কেন্দ্রীভূত হ্যান্ডলার। Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — ওয়েব, ডিপ লিংকিং এবং জটিল পরিস্থিতির জন্য ডিক্লারেটিভ নেভিগেশন।

Navigator 2.0

Navigator 2.0 — ডিক্লারেটিভ নেভিগেশন। Router — কেন্দ্রীয় Widget। RouteInformationParser — URL পার্সিং। RouterDelegate — স্ট্যাক ব্যবস্থাপনা। GoRouter (প্যাকেজ) — Navigator 2.0-এর ওপর সরলীকৃত র্যাপার। সমর্থন করে: নামযুক্ত রুট, প্যারামিটার, রিডাইরেক্ট, ডিপ লিংকিং। IT Sectr বেশিরভাগ প্রকল্পের জন্য GoRouter এবং শুধুমাত্র জটিল পরিস্থিতিতে (ওয়েব, ডেস্কটপ) Navigator 2.0 ব্যবহারের পরামর্শ দেয়।

অ্যাসিঙ্ক (FutureBuilder, StreamBuilder)

FutureBuilder — Widget যা Future-এর ভিত্তিতে UI তৈরি করে। connectionState: none, waiting, active, done। ব্যবহার করা হয়: HTTP অনুরোধ, DB রিড, টাইমারের জন্য। StreamBuilder — Stream-এর জন্য Widget (অসীম ডেটা প্রবাহ)। snapshot.data, snapshot.hasError, snapshot.hasData। ব্যবহার করা হয়: WebSocket, Firebase, লোকেশন আপডেটের জন্য। উভয় Widget নতুন ডেটা পাওয়ার পর পুনর্নির্মিত হয়।

স্টেট ম্যানেজমেন্ট

Provider — সহজ DI + স্টেট ম্যানেজমেন্ট। ChangeNotifierProvider, MultiProvider। Riverpod — Provider-এর আধুনিক বিকল্প: কম্পাইল-সেফ, BuildContext-এর থেকে স্বাধীন। Bloc — ইভেন্ট-ড্রিভেন আর্কিটেকচার: Cubit (সরল ইভেন্ট) বনাম Bloc (জটিল)। GetX — হালকা স্টেট ম্যানেজমেন্ট + DI + রাউটিং। setState — সবচেয়ে সহজ, লোকাল স্টেটের জন্য। IT Sectr নতুন প্রকল্পের জন্য Riverpod এবং বিদ্যমান প্রকল্পের জন্য Provider ব্যবহারের পরামর্শ দেয়।

থিম এবং অভিযোজন (MediaQuery, ThemeData)

MediaQuery — স্ক্রিন সাইজ, ওরিয়েন্টেশন, প্ল্যাটফর্ম, textScaleFactor। MediaQuery.of(context).size.width। ThemeData — অ্যাপ থিম: রঙ, ফন্ট, আকার। Theme.of(context).textTheme.bodyLarge। Hot Reload — চলমান অ্যাপে কোড ইনজেকশন। স্টেট সংরক্ষণ করে। সমর্থন করে না: main() পরিবর্তন, গ্লোবাল ভেরিয়েবল, স্ট্যাটিক ফিল্ড। Hot Restart — সম্পূর্ণ অ্যাপ পুনরায় শুরু (স্টেট ক্ষতি)। Hot Reload — ডেভেলপারদের জন্য Flutter-এর প্রধান সুবিধা।

StatelessWidget — স্ট্যাটিক কনটেন্টের জন্য। StatefulWidget — ডাইনামিক কনটেন্টের জন্য। InheritedWidget — DI-র জন্য। IT Sectr ডিফল্টভাবে StatelessWidget এবং শুধুমাত্র প্রয়োজন হলে StatefulWidget ব্যবহারের পরামর্শ দেয়।

রেস্পন্সিভ লেআউট

LayoutBuilder — প্যারেন্ট মাত্রার সাথে খাপ খাওয়ানো। OrientationBuilder — ওরিয়েন্টেশনের সাথে খাপ খাওয়ানো। Expanded বনাম Flexible — Row/Column-এ স্থান বিতরণ। MediaQuery — ট্যাবলেট এবং ডেস্কটপের জন্য ব্রেকপয়েন্ট। SafeArea — সিস্টেম এলিমেন্ট (নচ, স্ট্যাটাস বার) থেকে মার্জিন। AspectRatio — অনুপাত বজায় রাখা। IT Sectr অ্যাডাপ্টিভ লেআউটের জন্য LayoutBuilder এবং ল্যান্ডস্কেপ ওরিয়েন্টেশনের জন্য OrientationBuilder ব্যবহারের পরামর্শ দেয়।

টেস্টিং (Widget, Integration, Unit)

ইউনিট টেস্ট — ব্যবসায়িক লজিক, রিপোজিটরি, মডেল টেস্টিং। dart test — চালান। Widget টেস্ট — আলাদাভাবে Widgets টেস্টিং। WidgetTester — pumpWidget, tap, enterText। ইন্টিগ্রেশন টেস্ট — বাস্তব ডিভাইস/এমুলেটরে সম্পূর্ণ পরিস্থিতি। Mockito — নির্ভরতা মকিং। Golden টেস্ট — স্ক্রিনশট তুলনা (গোল্ডেন ফাইল)। IT Sectr প্রতিটি স্ক্রিনের জন্য Widget টেস্ট এবং ব্যবসায়িক লজিকের জন্য ইউনিট টেস্টের পরামর্শ দেয়।

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

অ্যানিমেশন (Implicit, Explicit, Hero)

Implicit অ্যানিমেশন — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder। প্রপার্টি পরিবর্তন স্বয়ংক্রিয়ভাবে অ্যানিমেট হয়। Explicit অ্যানিমেশন — Tween সহ AnimationController। forward() / reverse()। Hero অ্যানিমেশন — ট্যাগ সহ Hero Widget — স্ক্রিনের মধ্যে ট্রানজিশন অ্যানিমেশন। Staggered অ্যানিমেশন — Interval সহ অ্যানিমেশন চেইন। Lottie — After Effects অ্যানিমেশন ইন্টিগ্রেশন। Rive — ইন্টারেক্টিভ অ্যানিমেশন (state machine)। IT Sectr 80% ক্ষেত্রে AnimatedContainer এবং জটিল পরিস্থিতিতে AnimationController ব্যবহারের পরামর্শ দেয়।

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

নেটওয়ার্কিং (http, dio, graphql)

http — সহজ HTTP ক্লায়েন্ট (get, post, put, delete)। dio — ইন্টারসেপ্টর, টাইমআউট, রিট্রাই, লগিং সহ উন্নত ক্লায়েন্ট। graphql_flutter — Flutter-এর জন্য GraphQL ক্লায়েন্ট। json_serializable — অ্যানোটেশনের মাধ্যমে fromJson/toJson জেনারেশন। Retrofit Dart — Retrofit-এর মতো type-safe HTTP ক্লায়েন্ট। WebSocket — web_socket_channel-এর মাধ্যমে। Firebase — Cloud Firestore, Realtime Database, Cloud Functions। IT Sectr REST API-র জন্য dio এবং GraphQL-এর জন্য graphql_flutter ব্যবহারের পরামর্শ দেয়।

Flutter DevTools — টুল সেট: Inspector (Widget ট্রি), Timeline (পারফরম্যান্স), Memory, Network, Logging। Profile mode — ডিবাগ ছাড়া প্রোফাইলিং। Performance overlay — FPS, বিল্ড টাইম। Flame chart — ফ্লেম চার্ট ট্রেসিং। DevTools — প্রোডাকশনে Flutter অ্যাপ্লিকেশন অপ্টিমাইজ করার প্রয়োজনীয় টুল।

Flutter Web — Flutter-কে WASM (WebAssembly)-এ কম্পাইল করা। CanvasKit (Skia) বনাম HTML renderer। CanvasKit — পিক্সেল-পারফেক্ট, কিন্তু ভারী। HTML renderer — হালকা, কিন্তু সীমাবদ্ধতা সহ। WASM (Flutter 3.22+) — নেটিভ পারফরম্যান্স। LayoutBuilder এবং MediaQuery-এর মাধ্যমে রেস্পন্সিভ অভিযোজন। IT Sectr ডেস্কটপ ওয়েব অ্যাপ্লিকেশনের জন্য CanvasKit এবং কনটেন্ট সাইটের জন্য HTML renderer ব্যবহারের পরামর্শ দেয়।