Slide 1

Slide 1 text

From 0 to production © Luca Nicoletti 2024 With Flutter in a month*

Slide 2

Slide 2 text

Luca Nicoletti • Android Engineer ~7 years • Jetpack Compose enthusiast • Youtuber (ish) • Into Multiplatform • Not only KMP 👋

Slide 3

Slide 3 text

How?

Slide 4

Slide 4 text

Chat GPT

Slide 5

Slide 5 text

Questions?

Slide 6

Slide 6 text

The timeline

Slide 7

Slide 7 text

The timeline 1 month development 03/05 27/05 First commit First release

Slide 8

Slide 8 text

The timeline Weeks before 03/05 The wall 🧱 Coding 💻* The switch 🔄

Slide 9

Slide 9 text

The timeline Months before Coding 💻 08/03 The idea 💡 The planning 📝 The design 🎨

Slide 10

Slide 10 text

The timeline Diamong painting

Slide 11

Slide 11 text

The timeline Diamong painting

Slide 12

Slide 12 text

The timeline Years before 2024 Coding job The idea 💡 2013 May - Jun 2017 } Flutter test*

Slide 13

Slide 13 text

The app 📱

Slide 14

Slide 14 text

The app 📱

Slide 15

Slide 15 text

The app 📱

Slide 16

Slide 16 text

The switch 🔄

Slide 17

Slide 17 text

The switch 🔄 Facing a wall 🧱 • Slow rendering (with Jetpack Compose) • Would need a second project for the Native iOS • With 0-ish knowledge of the platform

Slide 18

Slide 18 text

The switch 🔄 Why not React? • Adversion through Js • ReactNative uses native components • Would the rendering problem occur again?

Slide 19

Slide 19 text

The switch 🔄 Why not KMP? • Love for Kotlin • Compose Multiplatform • Would face the same problem? • LocalDB? • Still too early?

Slide 20

Slide 20 text

Tools

Slide 21

Slide 21 text

Tools What I used • Visual Studio Code + Terminal • Android Studio • Mac OS • iPhone • Emulators • Physical Android

Slide 22

Slide 22 text

Tools What I used

Slide 23

Slide 23 text

The development

Slide 24

Slide 24 text

The development Libraries • Navigation: `go_router` • Persistence: `provider` • Storage: `shared_preferences` & `sq f lite` • Interactions: • Sounds: `soundpool` • Vibrations: ` f lutter_vibrate` • Upgrade dialog: `upgrader`

Slide 25

Slide 25 text

The development Libraries • Others • ` f irebase_analytics` • ` f irebase_crashlytics` • ` f irebase_database` • `cached_network_image` • ` f lutter_svg`

Slide 26

Slide 26 text

The development go_router

Slide 27

Slide 27 text

The development go_router

Slide 28

Slide 28 text

The development go_router

Slide 29

Slide 29 text

The development Provider

Slide 30

Slide 30 text

The development shared_preferences

Slide 31

Slide 31 text

The development shared_preferences

Slide 32

Slide 32 text

The development shared_preferences

Slide 33

Slide 33 text

The development sq f lite

Slide 34

Slide 34 text

The development sq f lite

Slide 35

Slide 35 text

The development sq f lite

Slide 36

Slide 36 text

The development Soundpool

Slide 37

Slide 37 text

The development Soundpool

Slide 38

Slide 38 text

The development f lutter_vibrate

Slide 39

Slide 39 text

The development Upgrader

Slide 40

Slide 40 text

The development Upgrader

Slide 41

Slide 41 text

The development Libraries • Image picker: `image_picker` • Image cropper: `image_cropper`

Slide 42

Slide 42 text

The development image_picker

Slide 43

Slide 43 text

The development image_picker & image_cropper

Slide 44

Slide 44 text

The development image_cropper

Slide 45

Slide 45 text

The development image_cropper

Slide 46

Slide 46 text

The development image_cropper

Slide 47

Slide 47 text

The development image_cropper

Slide 48

Slide 48 text

The development Libraries • UI • Confetti: `confetti` • Intro: `page_view_dot_indicator`, `carousel_slider` • Intro: `rotated_corner_decoration` • Capturing the Widget: `widgets_to_image` • Sharing the result: `share_plus`

Slide 49

Slide 49 text

The development widgets_to_image & share_plus

Slide 50

Slide 50 text

The development widgets_to_image & share_plus

Slide 51

Slide 51 text

The development confetti

Slide 52

Slide 52 text

The development confetti

Slide 53

Slide 53 text

The development rotated_corner_decoration

Slide 54

Slide 54 text

The development rotated_corner_decoration

Slide 55

Slide 55 text

The development rotated_corner_decoration

Slide 56

Slide 56 text

First feedbacks

Slide 57

Slide 57 text

First feedbacks What to improve • The timer gives anxiety 😥 • Haptic feedback 📳 • Sound 🔊 • Multiple games at the same time ♟👾🕹🎲

Slide 58

Slide 58 text

First feedbacks What to improve • Timer became collapsible

Slide 59

Slide 59 text

First feedbacks What to improve • Multiple games at the same time ♟👾🕹🎲

Slide 60

Slide 60 text

Release!

Slide 61

Slide 61 text

Release Now what? Task iOS Android Setup Developer account ❌ ✅ Pay the fees ❌ ✅ Generate release builds ❌ ✅ Beta release ✅ ❌ Promote the release ✅ ✅

Slide 62

Slide 62 text

Release Building them

Slide 63

Slide 63 text

Release Now what? Task iOS Android Setup Developer account 🟰 🟰 Pay the fees ❌ ✅ Generate release builds 🟰 🟰 Beta release ✅ ❌ Promote the release 🟰 🟰

Slide 64

Slide 64 text

Problems

Slide 65

Slide 65 text

Problems What went wrong • ChatGPT is ok, not good • ZoomableWidget* • Apps size! • Users really notice that!

Slide 66

Slide 66 text

Problems ZoomableWidget

Slide 67

Slide 67 text

Problems ZoomableWidget

Slide 68

Slide 68 text

Problems ZoomableWidget

Slide 69

Slide 69 text

Problems ZoomableWidget

Slide 70

Slide 70 text

Problems ZoomableWidget

Slide 71

Slide 71 text

Problems Widget generation

Slide 72

Slide 72 text

Problems Widget generation ChatGPT VSCode plugin

Slide 73

Slide 73 text

Problems Widget generation

Slide 74

Slide 74 text

Problems What I did wrong • Simple approach (Provider 👀) • Complexity kept adding • No structure

Slide 75

Slide 75 text

Problems Provider

Slide 76

Slide 76 text

Future

Slide 77

Slide 77 text

Future Would I use it again? • Yes • No

Slide 78

Slide 78 text

Future Would I use it again? • Yes • Framework knowledge • Enjoyment of development • Multi-platform • Good support & libraries • No

Slide 79

Slide 79 text

Future Would I use it again? • Yes • No • App size • Language lacks features • Lacking knowledge (Architecture, best practices, etc…)

Slide 80

Slide 80 text

The serious ones Questions?

Slide 81

Slide 81 text

Thank you! © Luca Nicoletti 2024 🙏