Theory
event list, third અને final time
આ subject OPEN થયું fest ના event list સાથે: Android નું ListView, adapter, getView, recycled thalis. twenty-two lessons પછી same 40 events ને Flutter માં listing ની જરૂર છે.
આ deliberate છે: watching ONE problem solved by 2 frameworks એ જ્યાં real understanding lives કરે છે. Flutter નો answer 2 forms ધરાવે છે: handfuls માટે eager one: અને lazy one જેનું heart, જ્યારે તમે તેને meet કરો, તમને recognition માં smile કરાવશે.
Theory
Form 1: eager ListView
ListView(children: [widgetA, widgetB, widgetC])
તેને children ને hand કરો; તે તેમને scroll કરે છે. દરેક child immediately built થાય છે, visible હોય કે નહીં: perfectly fine 8 rows ના SETTINGS page માટે, wasteful કંઈ માટે જે grows.
કારણ કે ListView પોતે scroll થાય છે, Unit 1 નો law intact cross over થાય છે: ક્યારેય એક ને બીજા same-axis scroller માં wrap ન કરો: gesture wars કોઈ framework ને જાણતા નથી.
Practical
Form 2: lazy builder (itemBuilder ને twice read કરો)
final events = List.generate(40, (i) => 'Event ${i + 1}');
ListView.builder(
itemCount: events.length, // કેટલી rows exist કરે છે
itemBuilder: (context, index) { // ફક્ત visible rows માટે called
return ListTile(
leading: const Icon(Icons.event), // the left slot
title: Text(events[index]), // main line
subtitle: const Text('Main Ground'), // secondary line
trailing: const Icon(Icons.chevron_right),
onTap: () {
// આ event નું booking screen open કરો
debugPrint('Tapped ${events[index]}');
},
);
},
)
Theory
itemBuilder એ getView, reborn
2 frameworks ને line up કરો:
- Android નો adapter getView(position, ...) ને answer કરતો હતો: build/refill row આ position માટે
- Flutter નું itemBuilder(context, index): build row આ index માટે
Same contract: function જે ONE row ને manufactures કરે છે on demand. અને recycling? Flutter નો builder lazy by design છે: rows build થાય છે ફક્ત જેમ તેઓ scroll થઈને view માં આવે છે અને disposed થાય છે જેમ તેઓ leave કરે છે: convertView dance જે તમે Unit 1 માં hand-code કર્યું હતું, હવે framework દ્વારા perform થાય છે કોઈ null-check તમારા ભૂલવા માટે નહીં. 40 events અથવા 40000: ફક્ત visible dozen exist કરે છે કોઈ પણ moment પર.
Theory
ListTile: row જે તમે hand-building કરવાનું બંધ કરો છો
Unit 1 ના custom row ને layout XML અને findViewById choreography ની જરૂર હતી. Flutter standard row ને widget તરીકે ships કરે છે, ListTile, named slots સાથે:
- leading: left slot: icon અથવા avatar
- title / subtitle: main અને secondary lines
- trailing: right slot: chevron, price
- onTap: built-in row tap
ListTile allows કરે છે તેના કરતાં richer rows? itemBuilder થી કોઈ પણ widget tree ને return કરો: Card જે તમારા own Column ને hold કરે છે: composition, as ever. અને rows ની વચ્ચે dividers: ListView.separated, જે separatorBuilder ને add કરે છે સાથે.
Quiz
5000-row list માટે, શા માટે ListView.builder dramatically better છે ListView(children: [...]) થી?
- builder rows automatically disk પર cached થાય છે
- itemBuilder lazily called થાય છે, ફક્ત rows માટે જે scrolling into view થાય છે: dozen live rows instead of 5000 built up front
- builder lists faster scroll થાય છે કારણ કે તેઓ animations ને skip કરે છે
- કોઈ real difference નથી: બંને બધી rows ને build કરે છે
Show the answer
itemBuilder lazily called થાય છે, ફક્ત rows માટે જે scrolling into view થાય છે: dozen live rows instead of 5000 built up front
children form બધી 5000 widgets ને construct કરે છે first frame પહેલાં: memory અને jank: જ્યારે builder rows ને manufactures કરે છે on demand અને તેમને dispose કરે છે off-screen: ફક્ત visible handful exist કરે છે. આ Unit 1 ની recycling insight છે (few thalis, endless queue) જે automatic બની: Android એ તમને convertView ને honour કરવા માંગ્યું; Flutter નો builder simply never builds શું needed નથી. Options A અને C mechanisms ને invent કરે છે: કોઈ disk cache નહીં, કોઈ animation skipping નહીં: laziness alone એ win છે. exam phrasing keep કરવા માટે: builder = lazy, on-demand construction of visible items.
Think first
તમારા Unit 1 vocabulary ને Translate કરો
dictionary ને complete કરો Android ના ListView થી Flutter સુધી, entry by entry: adapter, getView(position), convertView recycling, setOnItemClickListener, notifyDataSetChanged. પછી tap.
Show the answer
Adapter: builder constructor itself (data + row factory એક place માં). getView(position): itemBuilder(context, index). convertView recycling: automatic laziness: કોઈ null-check નહીં, framework builds/disposes. setOnItemClickListener(position): row પર onTap જે તમે build કરો છો: index already scope માં છે, કોઈ listener juggling નહીં. notifyDataSetChanged: setState data change ની આસપાસ: એક Flutter answer દરેક update માટે. પાંચ entries, એક lesson: frameworks spelling ને change કરે છે; LIST same problem રહે છે.
Watch out
List slips
big data માટે children form: compiles, runs, janks: builder તરફ reach કરો moment જે list data-driven હોય.
itemCount ને Forgetting કરવું: infinite builder happily asks for index 40 of 40-item list: RangeError: itemCount એ fence છે.
Column ની અંદર ListView without bounds: unbounded-height errors: તેને Expanded wrapper આપો (stripes lesson નો cousin).
setState વગર list ને Mutating કરવું: rows appear અથવા vanish નથી થતી: controlled law data ને પણ govern કરે છે.
Theory
circle closes થાય છે
First lesson of this subject: Android list, adapter, recycled rows. Third-last lesson: same list, અને adapter idea so absorbed કે Flutter નું version old friend તરીકે reads થાય છે. તે arc IS subject છે: patterns over platforms. બે lessons બાકી છે: dialogs અને tooltips (polite interruptions), પછી toast, switch, charts અને Form જે FestConnect Flutter ને finishes કરે છે good માટે.
Summary
Key takeaways
- ListView(children:) દરેક row ને up front build કરે છે: ફક્ત small fixed lists માટે.
- ListView.builder(itemCount, itemBuilder): lazy: rows build થાય છે ફક્ત જેમ તેઓ scroll થઈને view માં આવે છે, પછી disposed.
- itemBuilder(context, index) એ Unit 1 નું getView(position) છે recycling સાથે made automatic.
- ListTile: leading / title / subtitle / trailing / onTap: ready-made Material row; richer rows કોઈ પણ widget tree છે.
- ListView.separated dividers ને add કરે છે separatorBuilder દ્વારા.
- Lists પોતે scroll થાય છે (same-axis scrollers માં nesting નહીં); data changes setState દ્વારા goes છે.
- Memory hook: builder builds ફક્ત શું eye see કરી શકે.