Theory
Rebuild शुरू होता है
Unit 1 ने FestConnect Mobile को perfect किया: सिर्फ़ Android के लिए। Secretary का iPhone अभी भी कुछ नहीं दिखाता।
Classic answer था एक दूसरी team जो app को Apple के toolkit में फिर से लिखे: double cost, drifting features।
Flutter Google का इस चीज़ को refuse करना है: ONE Dart codebase, दोनों phones के लिए natively compiled (और web और desktop भी)। आपने Dart इसी moment के लिए सीखी। पहला सवाल जो असली marks लायक है: एक codebase 2 बहुत अलग operating systems पर सही कैसे दिख सकता है?
Theory
Answer: Flutter सब कुछ खुद Draw करता है
ज़्यादातर cross-platform tools native widgets को WRAP करते हैं: Android से इसका button माँगिए, iOS से इसका अपना: और हर platform difference को एक bug की तरह inherit कीजिए।
Flutter कुछ ज़्यादा radical करता है: यह native widgets बिल्कुल इस्तेमाल ही नहीं करता। Screen एक blank canvas है, और Flutter का engine हर button, list और letter का हर pixel खुद paint करता है, Skia graphics engine के ज़रिए।
Consequence: app दोनों phones पर IDENTICAL है: same pixels, same behaviour: क्योंकि platform से कभी कुछ draw करने को पूछा ही नहीं गया।
At a glance
Flutter की 3-Layer Architecture
| Layer | किसमें Written | काम |
|---|---|---|
| Framework | Dart | Widgets, Material/Cupertino libraries, layout और rendering logic: वह layer जिसके against आप code करते हैं |
| Engine | C++ | Skia graphics (हर pixel paint करता है) + Dart runtime |
| Embedder | Per platform | वह native shell जो हर platform पर, Android, iOS वगैरह, engine को host करता है |
Theory
Features, और Project Ritual
Exams जो feature list चाहती हैं: single codebase (Android + iOS + web + desktop), hot reload (एक saved change RUNNING app में एक second के अंदर दिखता है: Dart का JIT, अपना cheque cash करते हुए), expressive widget-based UI (सब कुछ widgets से composed), और native performance (release builds AOT machine code हैं: Dart bargain का दूसरा आधा)।
Project creation: Flutter SDK install कीजिए, flutter doctor चलाइए (यह आपके setup को audit करता है और बताता है क्या missing है), फिर Android Studio: New Flutter Project: या command line पर, flutter create fest_app।
Practical
lib/main.dart: सबसे छोटा FestConnect Flutter
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp( // the app widget
home: Scaffold( // one screen's skeleton
body: Center( // an invisible arranger
child: Text('FestConnect Flutter'), // a visible widget
),
),
));
}
// flutter run (or the IDE's play button)
// Same pixels on Android AND on the secretary's iPhone.
Follow along
कुछ नहीं से Running App तक
- Flutter SDK Install कीजिए flutter.dev से download कीजिए, extract कीजिए, इसका bin folder PATH में add कीजिए। Dart bundled हुआ आता है।
- चलाइए: flutter doctor Setup auditor: यह SDK, Android Studio, plugins, devices check करता है, और exactly बताता है क्या fix करना है।
- Android Studio: New Flutter Project इसे SDK path पर point कीजिए; यह project generate करता है lib/main.dart को entry file की तरह।
- इसे चलाइए: flutter run या Play Button एक emulator या cable-connected phone पर। फिर Text edit कीजिए, save कीजिए, और hot reload को एक second के अंदर repaint होते देखिए।
Quiz
एक Flutter app Android और iOS पर IDENTICALLY क्यों दिखता और behave करता है?
- Flutter आपके Dart को हर platform के native Java और Swift widgets में translate करता है
- Flutter का engine Skia के ज़रिए हर pixel खुद paint करता है, कभी platform के native widgets इस्तेमाल नहीं करता
- Google और Apple ने एक shared widget standard पर agree किया
- यह नहीं होता: Flutter apps design से हर platform पर अलग दिखते हैं
Show the answer
Flutter का engine Skia के ज़रिए हर pixel खुद paint करता है, कभी platform के native widgets इस्तेमाल नहीं करता
Engine-paints-everything design Flutter की foundational bet है: OS एक blank surface और input events supply करता है; Skia हर button और letter draw करता है, तो differ करने के लिए कुछ भी platform-specific नहीं है। Option A दूसरे cross-platform tools के wrapper approach को describe करता है: वह strategy जिसे Flutter ने explicitly reject किया, और exam का favourite contrast। Option C ऐसी diplomacy invent करता है जो कभी नहीं हुई। Option D में एक grain of nuance है (Cupertino widgets iOS-styled looks के लिए EXIST करते हैं, opt-in) पर जैसा stated है यह false है: identical rendering default और point है।
Think first
Hot Reload: Dart का Cheque Cash करना
Unit 2 ने promise किया था Dart का JIT matter करेगा। Explain कीजिए एक change save करने और उसे running app में देखने के बीच क्या होता है, और release builds यह machinery क्यों नहीं carry करती, tap करने से पहले।
Show the answer
Development के दौरान app Dart के JIT पर चलता है: save पर, सिर्फ़ बदला हुआ code recompile होता है और RUNNING app में inject होता है, जो अपने widgets rebuild करता है: state preserved, एक second के अंदर: यही hot reload है, और यह UI work को live sculpting में बदल देता है। Release builds इसकी बजाय AOT इस्तेमाल करती हैं: सब कुछ पहले से native ARM में compile, कोई JIT machinery ship नहीं होती: पूरी speed, instant startup। एक language, 2 compilers, हर एक अपना moment serve करते हुए: exact story जो Dart overview ने बताई, अब आपकी अपनी screen पर visible।
Watch out
Setup और Concept Traps
flutter doctor Skip करना: पहले week की आधी सारी Flutter agony एक missing plugin या licence है जिसे doctor line 1 में नाम देता: पहले इसे चलाइए, पूरी तरह obey कीजिए।
"Flutter Native Widgets में Compile होता है": यह native CODE में compile होता है पर अपने OWN widgets paint करता है: 2 halves अलग रखिए।
lib/ के बाहर Edit करना: आपका app lib/main.dart और friends में रहता है; android/ और ios/ folders embedder का territory हैं: generated, कम ही touched।
Theory
एक Word सब कुछ Rule करेगा: Widget
Listing को वापस देखिए: MaterialApp एक Scaffold hold करता है एक Center hold करता है एक Text: widgets का एक TREE, हर एक named parameters के ज़रिए configured (Unit 2 का passport, पहले से pay कर रहा है)। Flutter में, screens, layouts, padding, यहाँ तक कि app खुद: सब widgets। अगला lesson इनकी family map करता है: visible बनाम invisible, stateless बनाम stateful, single-child बनाम multi-child: classification जिस पर subject का बाकी सब खड़ा है।
Summary
Key takeaways
- Flutter: Google का open-source UI toolkit: एक Dart codebase, Android, iOS, web, desktop के लिए natively compiled।
- Architecture: Dart Framework (widgets, आपकी layer) C++ Engine (Skia + Dart runtime) के ऊपर, per-platform Embedder के ऊपर।
- Flutter हर pixel खुद paint करता है: कोई native widgets wrapped नहीं: हर जगह identical UI।
- Features: single codebase, hot reload (JIT), expressive widget UI, native AOT performance।
- Ritual: SDK install कीजिए, flutter doctor, New Flutter Project, lib/main.dart, flutter run।
- main() root widget के साथ runApp() call करता है; UI एक widget tree है।
- Memory hook: एक codebase, इसका अपना paintbrush, तीन layers deep।