Flutter — মূল ধারণা, আর্কিটেকচার এবং উইজেট

Flutter কী

Flutter একটি SDK (সফ্টওয়্যার ডেভেলপমেন্ট কিট) এবং ইউজার ইন্টারফেস তৈরির ফ্রেমওয়ার্ক, যা Google 2015 সালে ঘোষণা করে। Flutter 1.0-এর প্রথম স্থিতিশীল সংস্করণ ডিসেম্বর 2018 সালে প্রকাশিত হয়। React Native-এর থেকে ভিন্ন, Flutter JavaScript এবং নেটিভ কোডের মধ্যে ব্রিজ ব্যবহার করে না — এটি সরাসরি প্রসেসরের নেটিভ নির্দেশনায় কম্পাইল হয়।

Flutter-এর মূল বৈশিষ্ট্য হল এর নিজস্ব রেন্ডারিং ইঞ্জিন। ফ্রেমওয়ার্কটি UIKit (iOS) বা Android-এর View সিস্টেমের ওপর নির্ভর করে না। বরং, Flutter Skia (2024-এর আগে) বা নতুন Impeller ইঞ্জিনের মাধ্যমে প্রতিটি পিক্সেল স্বাধীনভাবে আঁকে। এটি সব প্ল্যাটফর্মে সামঞ্জস্যপূর্ণ চেহারা নিশ্চিত করে এবং বিভিন্ন OS সংস্করণের সাথে মানিয়ে নেওয়ার সমস্যা দূর করে।

Statista 2024 অনুসারে, Flutter জনপ্রিয়তায় ক্রস-প্ল্যাটফর্ম ফ্রেমওয়ার্কের মধ্যে প্রথম স্থানে রয়েছে: প্রায় 46% ডেভেলপার মোবাইল ডেভেলপমেন্টের জন্য এটি ব্যবহার করেন। ফ্রেমওয়ার্কটি Google Pay, Alibaba, eBay, BMW এবং Tencent-এর প্রকল্পে ব্যবহৃত হয়।

Flutter-এর ইতিহাস এবং সংস্করণ

প্রথম Flutter-এর আলফা সংস্করণ 2015 সালে Dart ডেভেলপার সামিটে Sky নামে উপস্থাপন করা হয়। 2018 সালে শুধুমাত্র iOS এবং Android-এর সমর্থন নিয়ে Flutter 1.0 প্রকাশিত হয়। Flutter 2.0 (2021) ওয়েব এবং ডেস্কটপ সমর্থন যোগ করে। Flutter 3.0 (2022) macOS এবং Linux-এর জন্য স্থিতিশীল সমর্থন চালু করে। Flutter 3.16 (2023) Impeller চালু করে — Metal এবং Vulkan-ভিত্তিক একটি নতুন রেন্ডারিং ইঞ্জিন।

Flutter 3.22 (2024) iOS-এ ডিফল্টভাবে Impeller অন্তর্ভুক্ত করে, উন্নত Material Design 3 সমর্থন, ম্যাক্রো এক্সটেনশন সহ Dart 3.4, এবং প্ল্যাটফর্ম রিসোর্সে সরাসরি অ্যাক্সেসের জন্য বিল্ট-ইন Native Assets সমর্থন। Google রিপোর্ট করে যে Impeller Skia-এর তুলনায় ফ্রেম জ্যাঙ্ক 90% কমায়।

Dart ভাষা

Dart একটি প্রোগ্রামিং ভাষা যা Google 2011 সালে তৈরি করেছে এবং Flutter-এ ব্যবহার করে। Dart কঠোর টাইপিংকে JIT কম্পাইলেশন (Hot Reload-এর জন্য) এবং AOT কম্পাইলেশন (প্রোডাকশন বিল্ডের জন্য) ক্ষমতার সাথে একত্রিত করে। Dart 3.0 (2023) প্যাটার্ন ম্যাচিং, সিল্ড ক্লাস এবং রেকর্ডকে স্থিতিশীল বৈশিষ্ট্য হিসেবে চালু করে।

Dart-এ Null safety একটি বাধ্যতামূলক বৈশিষ্ট্য যা সংস্করণ 2.12 থেকে চালু হয়েছে। কম্পাইলার বিল্ড টাইমে সব নালযোগ্য টাইপ পরীক্ষা করে, রানটাইমে NullPointerException দূর করে। ডেটা টাইপ (int, String, bool) ডিফল্টভাবে নন-নালযোগ্য, এবং নালযোগ্য মান ? প্রত্যয় ব্যবহার করে (যেমন, String? name)।

Flutter আর্কিটেকচার

Flutter আর্কিটেকচার তিন-স্তরের নীতিতে নির্মিত। নিচের স্তর হল ইঞ্জিন (C/C++), যা রেন্ডারিং, I/O এবং প্ল্যাটফর্ম API-তে অ্যাক্সেসের জন্য দায়ী। মাঝের স্তর হল ফ্রেমওয়ার্ক (Dart), যা উইজেট সিস্টেম, জেসচার, অ্যানিমেশন এবং নেভিগেশন বাস্তবায়ন করে। উপরের স্তর হল অ্যাপ্লিকেশন (Dart), যা উইজেটগুলিকে একটি ট্রিতে একত্রিত করে।

উইজেট এবং উইজেট ট্রি

Flutter-এ, সবকিছুই একটি উইজেট। উইজেট দুই ধরনের: StatelessWidget (অপরিবর্তনীয়, অবস্থা সংরক্ষণ করে না) এবং StatefulWidget (পরিবর্তনীয়, State-এর মাধ্যমে অবস্থা পরিচালনা করে)। উইজেট ট্রি হল একটি ক্রমিক কাঠামো যেখানে প্রতিটি চাইল্ড উইজেট প্যারেন্টের ভিতরে নেস্টেড থাকে। Scaffold, AppBar, Container, Text, Column, Row — এগুলি মৌলিক বিল্ডিং ব্লক।

BuildContext একটি অবজেক্ট যা ট্রিতে উইজেটের অবস্থান জানিয়ে দেয়। MediaQuery.of(context) স্ক্রিনের মাত্রা পায়, Theme.of(context) বর্তমান থিম পায়। BuildContext নেভিগেশন (Navigator.of(context)), InheritedWidget-এ অ্যাক্সেস এবং Localizations.of-এর মাধ্যমে লোকেল অনুবাদের জন্য ব্যবহৃত হয়।

Impeller ইঞ্জিন

Impeller Flutter-এর আধুনিক রেন্ডারিং ইঞ্জিন, যা C++-এ লেখা এবং Metal (iOS/macOS) ও Vulkan (Android) ব্যবহার করে। Skia-র থেকে ভিন্ন, যা প্রতি ফ্রেম শুরু থেকে পুনরায় আঁকত, Impeller শেডার আগে থেকে কম্পাইল করে এবং ক্যাশে সংরক্ষণ করে। এটি জটিল দৃশ্যের প্রথম রেন্ডারিংয়ের সময় বিলম্ব দূর করে এবং GPU লোড কমায়।

Google Flutter টিম-এর পরীক্ষা দেখায় যে Impeller শেডার কম্পাইলেশনের সময় 200–500 ms (Skia) থেকে 1–3 ms-এ কমিয়ে আনে। iPhone 13 Pro-তে, Impeller-এর ইম্পালস রেন্ডারিং ফ্রেম ড্রপ ছাড়াই 120 FPS অর্জন করে। Vulkan-সহ Android-এ, এটি মিড-রেঞ্জ ডিভাইসেও (Xiaomi Redmi Note 12) স্থিতিশীল 60 FPS প্রদান করে।

Flutter অ্যাপ্লিকেশন উদাহরণ

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter অ্যাপ্লিকেশন')),
        body: const Center(
          child: Text('হ্যালো, Flutter!'),
        ),
      ),
    );
  }
}

Flutter-এর সুবিধা

একক কোডবেস — Flutter-এর প্রধান সুবিধা। একটি Dart প্রকল্প iOS, Android, Web, Windows, macOS এবং Linux-এ কম্পাইল হয়। Google-এর মতে, এটি পৃথক iOS এবং Android প্রকল্পের তুলনায় ডেভেলপমেন্ট সময় 30–50% কমায়। Alibaba Flutter-এ সুইচ করার পরে সংস্করণ প্রকাশের সময় 30% কমিয়েছে।

পারফরম্যান্স Flutter-এর নেটিভের কাছাকাছি। Dart-এর ARM এবং x86_64 মেশিন কোডে AOT কম্পাইলেশন ইন্টারপ্রিটেশন বিলম্ব দূর করে। Impeller ইঞ্জিন 2018-এর ডিভাইসেও (iPhone XR, Samsung Galaxy S9) 60 FPS গ্যারান্টি দেয়। Google-এর মতে, Flutter অ্যাপ্লিকেশনে 99.5% ফ্রেম জ্যাঙ্ক ছাড়াই রেন্ডার হয়।

Hot Reload — তাত্ক্ষণিক কোড আপডেটের প্রযুক্তি। ডেভেলপার সোর্স কোড পরিবর্তন করে, ফাইল সেভ করে, এবং Flutter বর্তমান অ্যাপ্লিকেশন অবস্থা না হারিয়ে 300–800 ms-এ উইজেট ট্রি পুনর্নির্মাণ করে। এটি UI ডিজাইন পুনরাবৃত্তি দ্রুত করে: সম্পূর্ণ পুনর্নির্মাণের অপেক্ষা না করে সেকেন্ডের মধ্যে মার্জিন, রঙ এবং অ্যানিমেশন পরিবর্তন করা যায়।

Material Design 3 এবং নেটিভ Cupertino ডিজাইন ভাষা (iOS স্টাইল) স্ট্যান্ডার্ড Flutter প্যাকেজে অন্তর্ভুক্ত। Material 3 উইজেট ডায়নামিক রঙ (Material You), রেসপন্সিভ লেআউট এবং স্ক্রিন ট্রানজিশন অ্যানিমেশন সমর্থন করে। CupertinoPageTransition এবং CupertinoNavigationBar নেটিভ iOS নেভিগেটরের আচরণ অনুকরণ করে।

কাস্টমাইজেশন উইজেটের জন্য প্রতিটি প্ল্যাটফর্মে কাস্টম View তৈরি করার প্রয়োজন নেই। শুধু build() ওভাররাইড করুন এবং একটি নতুন উইজেট ফেরত দিন। অ্যানিমেশন প্যাকেজ (AnimatedContainer, Hero, TweenAnimationBuilder) এবং জেসচার প্যাকেজ (GestureDetector, Dismissible) প্ল্যাটফর্ম কোড না লিখেই UI অ্যানিমেশন পরিস্থিতির 95% কভার করে।

Flutter ইকোসিস্টেম এবং প্যাকেজ

pub.dev Dart এবং Flutter-এর জন্য অফিসিয়াল প্যাকেজ রেজিস্ট্রি। জুলাই 2024 পর্যন্ত, রেজিস্ট্রিতে 45,000-এর বেশি প্যাকেজ প্রকাশিত হয়েছে। একটি প্যাকেজ ইনস্টল করতে flutter pub add <package_name> কমান্ড ব্যবহার করা হয়। Pub স্বয়ংক্রিয়ভাবে নির্ভরতা সমাধান করে, সংস্করণ সামঞ্জস্য যাচাই করে এবং pubspec.lock জেনারেট করে।

Flutter-এ স্টেট ম্যানেজমেন্ট প্রধান আর্কিটেকচারাল চ্যালেঞ্জগুলির একটি। flutter_bloc ছাড়াও, জনপ্রিয় সমাধানগুলির মধ্যে রয়েছে: Provider (Google-এর সুপারিশকৃত, InheritedWidget ব্যবহার করে), Riverpod (কম্পাইল-টাইম নিরাপত্তাসহ Provider-এর পুনঃডিজাইন সংস্করণ), এবং GetX (সব-ইন-ওয়ান: স্টেট, রাউটিং, DI)। Provider শুরু করার জন্য সবচেয়ে সহজ: ChangeNotifierProvider মডেলকে মোড়ানো করে, এবং Consumer ডেটা পরিবর্তনে উইজেট পুনর্নির্মাণ করে।

Flutter-এ টেস্টিং তিন স্তরে সমর্থিত। ইউনিট টেস্ট (flutter test) UI ছাড়া ফাংশন এবং ক্লাস পরীক্ষা করে। উইজেট টেস্ট (testWidgets) পৃথক পরিবেশে পৃথক উইজেট রেন্ডার করে। ইন্টিগ্রেশন টেস্ট (IntegrationTest) ডিভাইস বা সিমুলেটরে সম্পূর্ণ অ্যাপ্লিকেশন চালায়। Flutter 3.22 প্যাচ অ্যানালিটিক্স এবং উন্নত কোড কভারেজ রিপোর্টিংয়ের মাধ্যমে প্যাচ টেস্টের জন্য সমর্থন যোগ করে।

জনপ্রিয় প্যাকেজ

dio ইন্টারসেপ্টর, টাইমআউট এবং FormData-সহ একটি HTTP ক্লায়েন্ট। GitHub-এ 40% Flutter প্রকল্পে ব্যবহৃত হয়। Dio লগিং, পুনরায় চেষ্টা এবং প্রমাণীকরণ টোকেন যোগ করার জন্য অনুরোধ ইন্টারসেপশন সমর্থন করে। দ্বিতীয় সর্বাধিক জনপ্রিয় লাইব্রেরি হল retrofit, যা টাইপ করা API ক্লায়েন্ট জেনারেট করে।

flutter_bloc BLoC (বিজনেস লজিক কম্পোনেন্ট) প্যাটার্নের উপর ভিত্তি করে একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি। BlocProvider উইজেট ট্রিতে নিচে স্টেট পাঠায়, BlocBuilder স্টেট পরিবর্তনে UI পুনর্নির্মাণ করে, এবং BlocListener সাইড ইফেক্ট (নেভিগেশন, SnackBar) হ্যান্ডল করে। Cubit ইভেন্ট ছাড়া BLoC-এর একটি সরলীকৃত সংস্করণ।

go_router Google-এর Flutter-এর জন্য ডিক্লারেটিভ নেভিগেশন। রুট GoRouter কনফিগারেশনে নেস্টেড রুট, রিডাইরেক্ট এবং ডিপ লিঙ্কের সমর্থন সহ বর্ণনা করা হয়। ShellRoute BottomNavigationBar ট্যাব জুড়ে নেভিগেশন বিভক্ত করে। GoRouter 14.0 টাইপ-সেফ পাথ এবং ট্যাব স্টেট সংরক্ষণসহ StatefulShellRoute সমর্থন করে।