The Compose Champ: Understanding Kotlin 01 @mambo_bryan

02 Design Centric Engineer Brian Odhiambo Co-organizer @ KotlinKenya Maintaining KotlinBits Mobile Engineer Yeah am all about that UI/UX & Kotlin

How? How can we use Koltin knowledge in compose? Why? Why do we need to understand kotlin? Today's Agenda 03 What? What is Kotlin and compose?

The WHAT What is Kotlin and compose?

A modern pragmatic programming language which is safe, clear and concise. A fast, reactive & intuitive UI framework for Kotlin Kotlin Compose

The WHY Why do we need to understand kotlin?

07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip!

07 If you're struggling using a programming language, then you're not using it right! 🤷🏽‍♂️ 🤷🏽‍♂️ 🤷🏽‍♂️ 🤩 Tip! But Why 🤔 ?

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe How does this relate to Kotlin? 🤔 🤔

If you want to chop down a tree, sharpen the axe Then chop down the tree Simple enough right? Sharpen The Axe If you want to use compose fully, understand Kotlin Then use compose You shall know Bliss! Understand Kotlin

The HOW How can we use Kotlin knowledge in compose?

Functions Composable are just Kotlin functions fun helloWorld() { println("Hello World") } @Composable fun HelloWorld() { Text(text ="Hello World") } @Preview @Composable fun HelloWorldPreview() { HelloWorld() }

Default Arguments Default Arguments help in fun sayHello( greeting: String, name: String = "World" ) { println("$greeting $name!") } fun main() { sayHello("Jambo") } // Jambo World!

Default Arguments Default Arguments help in @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, ... ){ ... } @Composable fun HelloWorld() { Text("Jambo World") }

Named Arguments Specify the parameter name for an argument fun sayHello( greeting: String, name: String = "World", country: String = "Kenya" ) { println("$greeting $name,") println("Welcome to $country!") } fun main() { sayHello("Jambo",country="South Africa") } // Jambo World, // Welcome to South Africa!

Named Arguments Specify the parameter name for an argument @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, ... ){ ... } @Composable fun HelloWorld() { Text( "Jambo World", color = Color.White ) }

High Order Functions Pass functions as arguments to other functions fun sayHello( greeting: String, name: String = "World", country: String = "Kenya", celebrate: () -> Unit ) { println("$greeting $name,") println("Welcome to $country!") celebrate() } fun main() { sayHello("Jambo",country="South Africa"){ println("🎉🎊🥳") } } // Jambo World, // Welcome to South Africa! // 🎉🎊🥳

High Order Functions Pass functions as arguments to other functions @Composable @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, ... ){ ... } @Composable fun HelloWorld() { Button(onClick = { println("Wohoo Soweto!") }) { Text("celebrate") } }

Function literals with receiver Pass functions that have declared types data class Market(val name: String){ val list = mutableListOf() fun buy()... fun sell()... fun previewMarket(block: List.() -> Unit){ list.block() } } fun main() { val market = Market(name= "Nairobi") ... market.previewMarket { this: List filter { it.length > 4 } println(this) } }

@Composable inline fun Column( modifier: Modifier = Modifier, ..., content: @Composable ColumnScope.() -> Unit ) { ... } @Composable fun HelloWorld() { Column { this: ColumnScope AnimatedVisibility(visible = true ) //... } } Function literals with receiver Pass functions that have declared types @Composable fun ColumnScope.AnimatedVisibility(...) //...

The SPOOKY STUFF The things that Kotlin does so well!

07 @Composable fun HelloWorld(isTrue: Boolean) { if(isTrue) Text("this") else Text("that") } if-else if-else is an expression and returns a value @Composable fun HelloWorld(isTrue: Boolean) { val value = if(isTrue) "this" else "that" Text(value) }

07 @Composable fun HelloWorld(isTrue: Boolean) { val icon = if(isTrue) Icons.Rounded.KeyboardArrowUp else Icons.Rounded.ArrowDropDown val description = if(isTrue) "this" else "that" Icon(imageVector = icon, contentDescription = title) } desctructuring dismantle a value into various variables

07 @Composable fun HelloWorld(isTrue: Boolean) { val (icon, title) = if(isTrue) Pair(Icons.Rounded.KeyboardArrowUp, "this") else Pair(Icons.Rounded.ArrowDropDown, "that") Icon(imageVector = icon, contentDescription = title) } desctructuring dismantle a value into various variables

The FAQs Some of the most commonly asked questions

How much kotlin should I learn before jumping to creating with compose? 🤔 Just the basics

What are the basics? 🤔 Literals(int, long, float, double, string, char), Functions(normal, local) Collections(list, set, array, dictionaries) Flow(conditional, loops, ranges) Classes(normal, object, data, enum) Safety(try-catch, not-null)

19 mambo_bryan MamboBryan Thank you for listening KotlinBits kotlinbits.vercel.app