موبائل ڈویلپمنٹ میں 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، لوکیشن اپ ڈیٹس۔ دونوں Widgets نئے ڈیٹا موصول ہونے پر دوبارہ تعمیر ہوتے ہیں۔

اسٹیٹ مینجمنٹ

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);
  });
}

اینیمیشنز (مخفی، واضح، Hero)

مخفی اینیمیشنز — AnimatedContainer، AnimatedOpacity، AnimatedPadding، TweenAnimationBuilder۔ پراپرٹی تبدیلیاں خود بخود اینیمیٹ ہوتی ہیں۔ واضح اینیمیشنز — Tween کے ساتھ AnimationController۔ forward() / reverse()۔ Hero اینیمیشن — ٹیگ والا Hero Widget — اسکرینوں کے درمیان ٹرانزیشن اینیمیشن۔ مرحلہ وار اینیمیشن — 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 تجویز کرتا ہے۔