Reimagine App Development with FlutterFlow (By: Sameer Shahzad) - DevFest Lahore 2024

Talk by Sameer Shahzad (https://www.linkedin.com/in/sameer-shahzad/) at DevFest Lahore 2024 by GDG Lahore.

Transcript

1. Hello Lahore
2. Who here uses apps?
9. FlutterFlow Sameer Shahzad Technical Support Engineer Flutterflow.io
10. Empowering Development at Every Scale with FlutterFlow Solo Team Enterprise FlutterFlow
11. FlutterFlow
12. FlutterFlow What is
14. ÊÅÄÃȽÇÁ¾½¿»¼ÂÉ¹Æ ¸½È¹º¿À¼Ç
15. ÅÃÃÄÂÁÀ ÉÇÁÈÇÆÀ ÉÇ #Æ  0ÀÁ''Á&Æ 0ÀÁ'Ä#ÁÀ'Æ ÅÃÃÄÂÁÀ ÉÇÁÈÇÆÀ ÉÇ #Æ  0ÀÁ''Á&Æ 0ÀÁ'Ä#ÁÀ'Æ ECD@Ä97AB6A5@43Ä6DA2ÄA4A1A5@D ÅÃÃÄÂÁÀ ÉÇÁÈÇÆÀ ÉÇ #Æ  0ÀÁ''Á&Æ 0ÀÁ'Ä#ÁÀ'Æ ÉÇÁÈÇÆÀ ÉÇ HÉF SÁRI ÁÀT eÈdÄaÈÆF hÀÈTaÈÆF SÃÁRÆÀ aƀÈRÁ0ÈsÈTÆÀ 0ÈsÈTÆÀ #Á&ÂÁÀ ÁÀÉdÆ ‡ÀÁà ˜—–•”“’‘“‰‘—ˆ m‰“ffj–jl”‘jk 0ÁÁÄ#Á&Æ SFÈÃÁ&ÆSÁRI v ÃÁÇTÁ&Æ ÉÇÁÈÇÆÀ ÉÇ HÉF SÁRI ÁÀT eÈdÄaÈÆF hÀÈTaÈÆF SÃÁRÆÀ aƀÈRÁ0ÈsÈTÆÀ 0ÈsÈTÆÀ #Á&ÂÁÀ ÁÀÉdÆ ‡ÀÁà ˜—–•”“’‘“‰‘—ˆ m‰“ffj–jl”‘jk 0ÁÁÄ#Á&Æ SFÈÃÁ&ÆSÁRI v ÃÁÇTÁ&Æ |{3C6@ ÉÇÁÈÇÆÀ ÉÇ HÉF SÁRI ÁÀT eÈdÄaÈÆF hÀÈTaÈÆF SÃÁRÆÀ aƀÈRÁ0ÈsÈTÆÀ 0ÈsÈTÆÀ #Á&ÂÁÀ ÁÀÉdÆ ‡ÀÁà ˜—–•”“’‘“‰‘—ˆ m‰“ffj–jl”‘jk 0ÁÁÄ#Á&Æ SFÈÃÁ&ÆSÁRI v ÃÁÇTÁ&Æ ¢{DAĝ4A1A5@D SÆÁÀRÄ¨ÉÀÄFÈT'Ƥ¤¤Ä¯ªÄ´Ä£³ ¸· ¸¹ ¼» » » m‘Âjl¿Ã½¾ ÍËÈÄÉÄÇÌÆ Õ46ÏA7Õ4CÑ âá×áàlÙÙl˜’ØÚj–l×á×áÖ EA2îë{4ĸîĸåå4îë{@îC5 ¸· ¸¹ ¼» » » m‘Âjl¿Ã½¾ ÍËÈÄÉÄÇÌÆ Õ46ÏA7Õ4CÑ âá×áàlÙÙl˜’ØÚj–l×á×áÖ EA2îë{4ĸîĸåå4îë{@îC5 ¸· ¸¹ ¼» » » m‘Âjl¿Ã½¾ ÍËÈÄÉÄÇÌÆ Õ46ÏA7Õ4CÑ âá×áàlÙÙl˜’ØÚj–l×á×áÖ EA2îë{4ĸîĸåå4îë{@îC5 ÷C5@{î5A7 ID:l C“– C—ˆ‰“‘ˆj– ÷C5@{î5A7 ID:l C“– C—ˆ‰“‘ˆj– ÷C5@{î5A7 ID:l C“– C—ˆ‰“‘ˆj– #ÆÆÄS‘ÆÄ UÇdÆ ‡ÈT'ÆÄS‘ÈÇ' ThA1AÄ S@34AÄ U5DA@ #ÆÆÄS‘ÆÄ UÇdÆ ‡ÈT'ÆÄS‘ÈÇ' ThA1AÄ S@34AÄ U5DA@ #ÆÆÄS‘ÆÄ UÇdÆ ‡ÈT'ÆÄS‘ÈÇ' ThA1AÄ S@34AÄ U5DA@ ¼îDî bî4î@3 ÉÇTÈÈÉÇÁ HÆdÃÉÇdÈsÆ OÃÁRÈ‘ 0 ¼îDî bî4î@3 ÉÇTÈÈÉÇÁ HÆdÃÉÇdÈsÆ OÃÁRÈ‘ 0 ¼îDî bî4î@3 ÉÇTÈÈÉÇÁ HÆdÃÉÇdÈsÆ OÃÁRÈ‘ 0 DîDå4{3Ä SAÏî5 gD P{22î5 g Æ 00 dÃÁRÆ -ÆTÈ 0 dÃÁRÆ -¤¤¤  xå{5DîC5 ¸4î g51A5@ X Y DîDå4{3Ä SAÏî5 gD P{22î5 g Æ 00 dÃÁRÆ -ÆTÈ 0 dÃÁRÆ -¤¤¤  xå{5DîC5 ¸4î g51A5@ X Y DîDå4{3Ä SAÏî5 gD P{22î5 g Æ 00 dÃÁRÆ -ÆTÈ 0 dÃÁRÆ -¤¤¤  xå{5DîC5 ¸4î g51A5@ X Y ÷C5@{î5A7Ä P7CåA HîAD ‡ÆÈ' » T [ÆÈ' ]00 fÁ ćÈT fÁ Ä [ÆÈ' £ÈÄÉÉÀ wvbsuA9 ÂÉÀTÆÀÄÉÉÀ wvbsuA9 ÷C5@{î5A7Ä P7CåA HîAD ‡ÆÈ' » T [ÆÈ' ]00 fÁ ćÈT fÁ Ä [ÆÈ' £ÈÄÉÉÀ wvbsuA9 ÂÉÀTÆÀÄÉÉÀ wvbsuA9 ÷C5@{î5A7Ä P7CåA HîAD ‡ÆÈ' » T [ÆÈ' ]00 fÁ ćÈT fÁ Ä [ÆÈ' £ÈÄÉÉÀ wvbsuA9 ÂÉÀTÆÀÄÉÉÀ wvbsuA9 u0Œ ¡œ›šŸ”ž˜™•™”–’“™  ”Ÿ‘–—“ž
17. ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()!"(#(&Â2 A75Á!(5Â2 A!27ED TS!P eÅÉXXbbÆdÇbc s(DÁ 3(Âf xÁ!)t ‚2!y "!Á!Ã! eÅÉXXbbÆdÇbc ÉÈÇÆÉÅÇÄ ÃÂÀÁ A!27ED ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& 2(&3(Âf A!27ED A7ES5 ‚2!y 2(&3 (Âf f()™ÃÂÀÁ A7ES5 3Â0()!"(#(&Â2 "(#(&Â2 3(&Â7h!jÂ2 eÅÉXXbbÆdÇbc A7ES5 T)75 ‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y "(#(&Â2 xf(y! ÂxÁ!)t s(DÁÃ( T)75‡E…75 ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 TS!P T)75 TS!P A75Á!(5Â2 3Â0()! "(#( &Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t Ã!‡!2 Ã!‡!2 T)75 f7f xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y s(DÁÃ( xy!)Â2 T)75 Ã!‡!2 "!Á! Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ s(DÁ3(Âf A!Â5&!2 zÀy!5&! Ã!‡!2 f7f T)75‡E…75 ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()! "(#( &Â2 f()™ÃÂÀÁ ‡E…75 s(DÁ3(Âf xÁ!)t ‚2!y "!Á! Ã! A!27E D "!Á!Ã! ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& A!2& "(#(&Â2 2(&3(Âf f()™ÃÂÀÁ A7ES5 3Â0()! "(#( &Â2 "!Á!Ã! ÉÈÇÆÉÅÇÄ T)75‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y A!27ED eÅÉXXbbÆdÇbc ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 ÉÈÇ ÆÉÅÇÄ A!Â5&!2 3Â0()!"(#(&Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t 3(&Â7 h!jÂ2 Ã!‡!2 xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y xÁ!)t 3(&Â7h!jÂ2 "!Á!Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ €~|}{
18. ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()!"(#(&Â2 A75Á!(5Â2 A!27ED TS!P eÅÉXXbbÆdÇbc s(DÁ 3(Âf xÁ!)t ‚2!y "!Á!Ã! eÅÉXXbbÆdÇbc ÉÈÇÆÉÅÇÄ ÃÂÀÁ A!27ED ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& 2(&3(Âf A!27ED A7ES5 ‚2!y 2(&3 (Âf f()™ÃÂÀÁ A7ES5 3Â0()!"(#(&Â2 "(#(&Â2 3(&Â7h!jÂ2 eÅÉXXbbÆdÇbc A7ES5 T)75 ‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y "(#(&Â2 xf(y! ÂxÁ!)t s(DÁÃ( T)75‡E…75 ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 TS!P T)75 TS!P A75Á!(5Â2 3Â0()! "(#( &Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t Ã!‡!2 Ã!‡!2 T)75 f7f xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y s(DÁÃ( xy!)Â2 T)75 Ã!‡!2 "!Á! Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ s(DÁ3(Âf A!Â5&!2 zÀy!5&! Ã!‡!2 f7f T)75‡E…75 ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()! "(#( &Â2 f()™ÃÂÀÁ ‡E…75 s(DÁ3(Âf xÁ!)t ‚2!y "!Á! Ã! A!27E D "!Á!Ã! ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& A!2& "(#(&Â2 2(&3(Âf f()™ÃÂÀÁ A7ES5 3Â0()! "(#( &Â2 "!Á!Ã! ÉÈÇÆÉÅÇÄ T)75‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y A!27ED eÅÉXXbbÆdÇbc ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 ÉÈÇ ÆÉÅÇÄ A!Â5&!2 3Â0()!"(#(&Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t 3(&Â7 h!jÂ2 Ã!‡!2 xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y xÁ!)t 3(&Â7h!jÂ2 "!Á!Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ A7ES5 €~|}{
19. ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()!"(#(&Â2 A75Á!(5Â2 A!27ED TS!P eÅÉXXbbÆdÇbc s(DÁ 3(Âf xÁ!)t ‚2!y "!Á!Ã! eÅÉXXbbÆdÇbc ÉÈÇÆÉÅÇÄ ÃÂÀÁ A!27ED ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& 2(&3(Âf A!27ED A7ES5 ‚2!y 2(&3 (Âf f()™ÃÂÀÁ A7ES5 3Â0()!"(#(&Â2 "(#(&Â2 3(&Â7h!jÂ2 eÅÉXXbbÆdÇbc A7ES5 T)75 ‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y "(#(&Â2 xf(y! ÂxÁ!)t s(DÁÃ( T)75‡E…75 ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 TS!P T)75 TS!P A75Á!(5Â2 3Â0()! "(#( &Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t Ã!‡!2 Ã!‡!2 T)75 f7f xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y s(DÁÃ( xy!)Â2 T)75 Ã!‡!2 "!Á! Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ s(DÁ3(Âf A!Â5&!2 zÀy!5&! Ã!‡!2 f7f T)75‡E…75 ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()! "(#( &Â2 f()™ÃÂÀÁ ‡E…75 s(DÁ3(Âf xÁ!)t ‚2!y "!Á! Ã! A!27E D "!Á!Ã! ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& A!2& "(#(&Â2 2(&3(Âf f()™ÃÂÀÁ A7ES5 3Â0()! "(#( &Â2 "!Á!Ã! ÉÈÇÆÉÅÇÄ T)75‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y A!27ED eÅÉXXbbÆdÇbc ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 ÉÈÇ ÆÉÅÇÄ A!Â5&!2 3Â0()!"(#(&Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t 3(&Â7 h!jÂ2 Ã!‡!2 xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y xÁ!)t 3(&Â7h!jÂ2 "!Á!Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ TS!P A7ES5 €~|}{
20. ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()!"(#(&Â2 A75Á!(5Â2 A!27ED TS!P eÅÉXXbbÆdÇbc s(DÁ 3(Âf xÁ!)t ‚2!y "!Á!Ã! eÅÉXXbbÆdÇbc ÉÈÇÆÉÅÇÄ ÃÂÀÁ A!27ED ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& 2(&3(Âf A!27ED A7ES5 ‚2!y 2(&3 (Âf f()™ÃÂÀÁ A7ES5 3Â0()!"(#(&Â2 "(#(&Â2 3(&Â7h!jÂ2 eÅÉXXbbÆdÇbc A7ES5 T)75 ‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y "(#(&Â2 xf(y! ÂxÁ!)t s(DÁÃ( T)75‡E…75 ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 TS!P T)75 TS!P A75Á!(5Â2 3Â0()! "(#( &Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t Ã!‡!2 Ã!‡!2 T)75 f7f xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y s(DÁÃ( xy!)Â2 T)75 Ã!‡!2 "!Á! Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ s(DÁ3(Âf A!Â5&!2 zÀy!5&! Ã!‡!2 f7f T)75‡E…75 ÃÂÀÁ ÉÈÇÆÉÅÇÄ "!Á!Ã! 3Â0()! "(#( &Â2 f()™ÃÂÀÁ ‡E…75 s(DÁ3(Âf xÁ!)t ‚2!y "!Á! Ã! A!27E D "!Á!Ã! ‡E…75 xf(y!ÂxÁ!)t eÅÉXXbbÆdÇbc A!2& A!2& "(#(&Â2 2(&3(Âf f()™ÃÂÀÁ A7ES5 3Â0()! "(#( &Â2 "!Á!Ã! ÉÈÇÆÉÅÇÄ T)75‡E…75 zÀy!5&! f()™ÃÂÀÁ ‚2!y A!27ED eÅÉXXbbÆdÇbc ‡E…75 xf(y! ÂxÁ!)t ‚2!y Ã!‡!2 ÉÈÇ ÆÉÅÇÄ A!Â5&!2 3Â0()!"(#(&Â2 zÀy!5&! xf(y!ÂxÁ!)t xÁ!)t 3(&Â7 h!jÂ2 Ã!‡!2 xy!)Â2 A75Á!(5Â2 xf(y!ÂxÁ!)t ‚2!y xÁ!)t 3(&Â7h!jÂ2 "!Á!Ã! A!27ED s(DÁÃ( ÉÈÇ ÆÉÅÇÄ ‡E…75 TS!P A7ES5 €~|}{
21. ÅÂÁÀ ÅÂÁÀ Ã ÅÀ $ÁÃ
22. ÅÂÁÀ ÅÂÁÀ Ã ÁÃ $Å À
23. ÅÂÁÀ ÅÂÁÀ Ã ÁÃ $Å À
24. Actions On Tap
25. Conditional Action 1 statusInfo == ‘requested’ TRUE Action 1 Firestore Query Query a collection Action 1 Firestore Query Query a collection Actio Actio Action 1 Show Snack Bar Congrats, you are requested! Action 1 Show Snack Bar Congrats, you are requested! Action 1 Show Snack Bar Congrats, you are requested! Action 1 Show Snack Bar Congrats, you are requested! Crea Back Creat Crea Back Creat Action Show S Congrat Action Show S Congrat Actions On Tap On Double Tap On Long Press On Mouse Exit
27. On Tap
28. What happens once this button is pressed?
32. Error Catching 2
34. ÈÇÆÄÅÃÂÁÇÀ ÈÇÆÅÇÉ (&%#! 2%A@ÄÅ8Ä!&%ÇÉ PÁÁÅFÇ&Ä 2%AÅFÇ&Ä PÇÅU&%É%Ç tÄqÅ2qÉ#! 2É#ÅyÇw%ÇÉ
35. Hey, could you make a quick update to the login form? We'd like to add a phone number field. Sure, I’ll look into it. Might take a bit to update the backend and UI. Before FlutterFlow
36. Hey, could you make a quick update to the login form? We'd like to add a phone number field. Sure, I’ll look into it. Might take a bit to update the backend and UI. I had to make some adjustments to the database too, so it's taking a little longer. But I should have it ready soon! Before FlutterFlow 2 Days Later
37. Hey, could you make a quick update to the login form? We'd like to add a phone number field. With FlutterFlow
38. Hey, could you make a quick update to the login form? We'd like to add a phone number field. With FlutterFlow
39. Hey, could you make a quick update to the contact form? We'd like to add a phone number field. WOW That Was Quick! Done, being Published Right Now!
42. One CodeBase
45. Custom Code
48. Branching
50. Quickly setup a database using our Firebase & Supabase integrations.
51. Use integrations to add rich functionality to your App
55. Schemas
56. Query and Variable Binding
57. Libraries
58. FlutterFlow AI
63. ÆÅÃÁÂÀÄ ÉÈÇ  !È
64. ÆÅÃÁÂÀÄ ÀÅÈÇÄ  ('%#"& B'%6&4532 HGFED SRQIP XEUUGR
65. ÆÅÃÁÂÀÄ ÀÅÈÇÄ  ('%#"& B'%6&4532 HGFED SRQIP XEUUGR beÀÈÈ`Ä
66. ÆÅÃÁÂÀÄ ÀÅÈÇÄ  ÅÂ&$ÄÂ#$ÇÃ# $À$ 43201) 432CB@87A201) 432WB@QA2IPHG cba`Y hgfde s`ppbg #ÀÈÈuÄ
67. ÁÀ ÉÈÇÆÅÄÃÂÃÉÈ  "Á ÆÆÇÈÈ &$Ç È$2(0Æ  7"ÀÀ&$ÇEÇÅ Æ6EÂÆ5B SU R0ÈP  baYWXV` igVadc` iqp tauX‚€`Xy€cYyv€V€ ˆ€ua€‚“Xy‘acYacW` lk`VdfytkcgVadc` rqpnom rqp{zxvuypnom rqp‰zxƒyp‚€ ŽŒ‹ ”“’‘ ™Œ––Ž“ ipyVdd“`
68. ÁÀ ÉÈÇÆÅÄÃÂÃÉÈ  "Á ÆÆÇÈÈ &$Ç È$2(0Æ  7"ÀÀ&$ÇEÇÅ Æ6EÂÆ5B SU R0ÈP  baYWXV` igVadc` iqp tauX‚€`Xy€cYyv€V€ ˆ€ua€‚“Xy‘acYacW` lk`VdfytkcgVadc` rqpnom rqp{zxvuypnom rqp‰zxƒyp‚€ ŽŒ‹ ”“’‘ ™Œ––Ž“ ipyVdd“` vX‚kWy X`Vy¥dYX
70. GiftIt Gift giving app built in 3 months to give gift to loved ones without ruining the surpris Built by 2 post secondary students, got funding before the peak of the holiday season Built in
71. MonoGram Slack / Linear app for project management — task tracking & delegation for entreprenuers Built in
72. SparkCharge Electric Vehicle Management app built for Sparkcharge that raised over $70M in funding First company to create mobile EV charging system network Built in
77. The only limit to FlutterFlow?
78. The only limit to FlutterFlow? Your imagination—and the time you give it.
79. Ready to bring your ideas to life?
80. 1 Free Year of FlutterFlow Pro 2 Months for non Education Education
81. 1 Free Year of FlutterFlow Pro Your journey to becoming a developer starts now. Education
82. https://forms.gle/UfseCukWLzmVWtxMA
83. Q & A https://forms.gle/UfseCukWLzmVWtxMA