Theory
rebuild begins થાય છે
Unit 1 એ FestConnect Mobile ને perfected કર્યું: ફક્ત Android માટે. secretary નો iPhone હજુ કંઈ show નથી કરતો.
classic answer એ બીજી team હતી જે app ને ફરીથી Apple ના toolkit માં write કરતી હતી: double cost, drifting features.
Flutter એ Google નો refusal છે તેનો: એક Dart codebase, બંને phones માટે natively compiled (અને web અને desktop). તમે Dart ને આ moment માટે learn કર્યું. first question worth real marks: કેવી રીતે એક codebase possibly 2 very different operating systems પર right look કરી શકે?
Theory
answer: Flutter બધું જાતે draws કરે છે
મોટાભાગના cross-platform tools native widgets ને WRAP કરે છે: Android ને તેના button માટે ask કરો, iOS ને તેના own માટે: અને દરેક platform difference ને bug તરીકે inherit કરો.
Flutter કંઈક more radical કરે છે: તે native widgets ને use કરતું નથી at all. screen એ blank canvas છે, અને Flutter નું engine દરેક pixel ને દરેક button, list અને letter નું paint કરે છે પોતે, Skia graphics engine દ્વારા.
consequence: app બંને phones પર IDENTICAL છે: same pixels, same behaviour: કારણ કે platform ને કંઈ draw કરવા માટે ક્યારેય asked નહોતું.
At a glance
Flutter નું 3-layer architecture
| Layer | Written in | Job |
|---|---|---|
| Framework | Dart | Widgets, Material/Cupertino libraries, layout અને rendering logic: layer જેની સામે તમે code કરો છો |
| Engine | C++ | Skia graphics (દરેક pixel ને paints કરે છે) + Dart runtime |
| Embedder | Per platform | native shell જે engine ને host કરે છે Android, iOS, વગેરે પર |
Theory
Features, અને project ritual
feature list જે exams want કરે છે: single codebase (Android + iOS + web + desktop), hot reload (saved change RUNNING app માં appear થાય છે એક second ની નીચે: Dart નો JIT, cashing its cheque), expressive widget-based UI (બધું widgets થી composed), અને native performance (release builds એ AOT machine code છે: Dart bargain ની બીજી અડધી).
project creation: Flutter SDK ને install કરો, flutter doctor run કરો (તે તમારા setup ને audit કરે છે અને કહે છે કે શું missing છે), પછી Android Studio: New Flutter Project: અથવા command line પર, flutter create fest_app.
Practical
lib/main.dart: smallest FestConnect Flutter
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp( // the app widget
home: Scaffold( // એક screen નું skeleton
body: Center( // an invisible arranger
child: Text('FestConnect Flutter'), // a visible widget
),
),
));
}
// flutter run (અથવા IDE નું play button)
// Same pixels Android પર AND secretary ના iPhone પર.
Follow along
nothing થી running app સુધી
- Flutter SDK ને Install કરો flutter.dev થી download કરો, extract કરો, તેના bin folder ને PATH માં add કરો. Dart bundled inside arrive થાય છે.
- Run: flutter doctor setup auditor: તે SDK, Android Studio, plugins, devices ને check કરે છે, અને exactly list કરે છે કે શું fix કરવું.
- Android Studio: New Flutter Project તેને SDK path પર point કરો; તે project ને generate કરે છે lib/main.dart સાથે entry file તરીકે.
- Run it: flutter run અથવા play button emulator અથવા cable-connected phone પર. પછી Text ને edit કરો, save કરો, અને hot reload ને watch કરો repaint કરતું એક second ની નીચે.
Quiz
શા માટે Flutter app Android અને iOS પર IDENTICAL look અને behave કરે છે?
- Flutter તમારા Dart ને translate કરે છે દરેક platform ના native Java અને Swift widgets માં
- Flutter નું engine દરેક pixel ને પોતે paint કરે છે Skia દ્વારા, ક્યારેય platform ના native widgets ને use કર્યા વગર
- Google અને Apple એ shared widget standard પર agree કર્યું
- તે નથી કરતું: Flutter apps look different થાય છે per platform design દ્વારા
Show the answer
Flutter નું engine દરેક pixel ને પોતે paint કરે છે Skia દ્વારા, ક્યારેય platform ના native widgets ને use કર્યા વગર
engine-paints-everything design એ Flutter નો foundational bet છે: OS blank surface અને input events ને supply કરે છે; Skia દરેક button અને letter ને draw કરે છે, તેથી કંઈ platform-specific differ થવાનું નથી. Option A wrapper approach ને describe કરે છે OTHER cross-platform tools નો: strategy જેને Flutter explicitly reject કર્યું, અને exam નો favourite contrast. Option C diplomacy ને invent કરે છે જે ક્યારેય happen નથી થઈ. Option D માં grain of nuance છે (Cupertino widgets iOS-styled looks માટે EXIST કરે છે, opt-in) પણ as stated false છે: identical rendering એ default છે અને point છે.
Think first
Hot reload: Dart cheque ને cash કરો
Unit 2 એ promise કર્યું હતું કે Dart નો JIT matter કરશે. explain કરો કે શું happens છે saving change અને seeing it ની વચ્ચે running app માં, અને શા માટે release builds આ machinery ને carry નથી કરતા, tap કરતા પહેલાં.
Show the answer
during development app Dart ના JIT પર runs થાય છે: save પર, ફક્ત changed code ને recompile કરવામાં આવે છે અને RUNNING app માં inject કરવામાં આવે છે, જે તેના widgets ને rebuild કરે છે: state preserved, એક second ની નીચે: એ hot reload છે, અને તે UI work ને live sculpting માં transform કરે છે. release builds instead AOT ને use કરે છે: બધું pre-compiled native ARM માં, કોઈ JIT machinery shipped નહીં: full speed, instant startup. એક language, 2 compilers, દરેક તેના moment ને serve કરે છે: exact story જે Dart overview એ કહ્યું, હવે તમારી own screen પર visible.
Watch out
Setup અને concept traps
flutter doctor ને Skipping કરવું: half of all first-week Flutter agony એ missing plugin અથવા licence છે જે doctor line 1 પર name કરતો હોત: run કરો first, obey કરો fully.
"Flutter compiles to native widgets": તે native CODE માં compile થાય છે પણ પોતાના OWN widgets ને paint કરે છે: 2 halves ને straight રાખો.
lib/ ની બહાર Editing કરવી: તમારું app lib/main.dart અને friends માં lives કરે છે; android/ અને ios/ folders એ embedder નું territory છે: generated, rarely touched.
Theory
એક word બધું rule કરશે: widget
listing પર back look કરો: MaterialApp holds Scaffold holds Center holds Text: widgets નું TREE, દરેક configured through named parameters (Unit 2 નો passport, already paying). Flutter માં, screens, layouts, padding, even app itself: બધું widgets. next lesson તેમના family ને map કરે છે: visible vs invisible, stateless vs stateful, single-child vs multi-child: classification જેના પર આખો rest subject stands કરે છે.
Summary
Key takeaways
- Flutter: Google નું open-source UI toolkit: એક Dart codebase, natively compiled Android, iOS, web, desktop માટે.
- Architecture: Dart Framework (widgets, તમારી layer) over C++ Engine (Skia + Dart runtime) over per-platform Embedder.
- Flutter દરેક pixel ને પોતે paint કરે છે: કોઈ native widgets wrapped નહીં: identical UI everywhere.
- Features: single codebase, hot reload (JIT), expressive widget UI, native AOT performance.
- Ritual: install SDK, flutter doctor, New Flutter Project, lib/main.dart, flutter run.
- main() root widget સાથે runApp() ને call કરે છે; UI એ widget tree છે.
- Memory hook: એક codebase, its own paintbrush, ત્રણ layers deep.