Compose Multiplatform for iOS and Android

Explore the Kotlin file structure, including package declarations, folder organization that mirrors the package name, and imports, then see how a file is built from functions, classes, or objects.

Learn how Kotlin's statically typed system catches type errors at compile time and how immutable vals and mutable vars promote predictable, safer code.

Explore Kotlin's null safety by using nullable and non-nullable types, and learn how the lateinit keyword postpones initialization until you assign a value, avoiding uninitialized property access exception.

Master Kotlin conditionals and loops for multiplatform apps. Learn if-else with parentheses, when expressions as switch replacements, and for, for each, while, and do-while loops over collections.

Explore Kotlin functional programming concepts, including higher-order functions, function types, and lambdas, plus extension functions, the fun keyword, and using this or = for single-expression bodies.

Explore Kotlin classes and objects in object oriented programming, declare properties and methods with the class keyword, use primary and secondary constructors, and handle final by default with open inheritance.

Explore Kotlin objects and object expressions, creating anonymous classes for one-time use, with a single instance accessible within its scope, and apply them to implement interfaces.

Explore how Kotlin interfaces define contracts, including abstract and default methods and properties, and learn to implement them via override, object expressions, and functional interfaces.

Learn about Kotlin scope functions such as let, run, apply, with, and also. Let and run return results, while apply, with, and also return the object.

Explore Kotlin coroutines as a concurrency pattern for asynchronous, non-blocking programming, covering launch, async, runBlocking, suspend functions, and cold vs hot flows and state flow.

Install and verify a multiplatform iOS and Android development environment on macOS, including Xcode and Android Studio, with K doctor guiding what’s done and what’s missing.

Verify the JDK installation by ensuring java home points to Android Studio, then echo the variable in the terminal and, if needed, run java -version.

Install the Kotlin Multiplatform Mobile plugin in Android Studio by opening settings, selecting plugins, searching for Kotlin Multiplatform Mobile, and installing or updating it.

Update the Kotlin plugin in Android Studio if your IDE isn’t the latest version; go to settings, search for Kotlin, and verify whether an update is needed.

Perform a final setup check with the K doctor tool, which evaluates your configuration and hints at anything you miss. Then start your first multiplatform project and explore briefly.

Describe how compose treats UI as reusable functions that render based on input and respond to data changes, illustrated by a calculator-like layout with text and button rows.

Learn to bootstrap a compose multi-platform project with the KMP wizard from JetBrains, generating an initial calculator app and configuring its name and package for Android and iOS.

Open the project in Android Studio, review Gradle build and folder structure, focusing on the compose app, iOS app, and src; delete the sample UI code to start from scratch.

Remove the initial code and keep the Google design guidelines inside the app function, then create a column that fills the screen to ensure a consistent, responsive layout across devices.

Display the top text showing results, allow entering digits, and set font size to 45 sp with right alignment and padding; use a non-material background color for now.

Design flat calculator buttons with a compose function, using modifiers, text, background and content colors, and onClick to pass the button label, preparing digit and operator buttons.

Highlight why a five-row button layout creates duplicated code and harms maintainability and extendability, and point to the dry rule and the proper way shown in the next video.

Learn to arrange calculator buttons in a multiplatform app by structuring button data into rows, distinguishing digits and operators, and sizing the zero button double width.

Preview the Android emulator, adjust button sizes with weight, add a top spacer, and learn how modifier order in compose determines the final layout.

Show how to run the calculator app in an iOS emulator with a consistent operator weight, then outline styling and color palette management for modifiers in part 2.

Define a cohesive app look with a material theme and a composable called team colors that returns a color set: gray, dark primary variant, and orange secondary for operator buttons.

Style the calculator buttons with team colors to match the design, then implement the logic to make the user interface function like a calculator.

Move all calculator screen code into its own file and keep the material theme outside the calculator to apply the theme across screens, even in a single-screen app.

Implement a view model with a private mutable state and a public state, handling button taps to reset, toggle sign, and perform add, multiply, and divide operations as view updates.

Explore view model logic for a calculator app, implementing reset, sign toggle, arithmetic operators, decimal handling, and state copies to manage operands and results.

Concatenate the pressed button value to the current operand, trimming a leading zero, and connect the ui to the ViewModel in Compose by remembering it and forwarding onClick events.

DishPal introduction teaches building a food social app for iOS and Android that shares dishes and posts with nearby friends. It covers project setup, navigation, UI, mock endpoints, platform resources.

Set up a DishPal multiplatform project using the KMT template, then configure root and compose app Gradle files, explore plugins, source sets, and libs and versions.toml for dependencies.

Discover how the Gradle settings file at the project root defines the structure, subprojects, and repositories for dependencies, while the Gradle properties file configures build properties and the daemon.

Import and add the android icon as an image asset, adjust its size, and verify the manifest. Then replace the ios app icon png and test on the emulator.

Reorganize the project by creating a platform-specific package and a Kotlin Multiplatform platform contract, move Android and iOS files, and establish a design system and navigation packages.

Build self-made navigation for a three-screen onboarding flow with a sealed screen class and a view model, then compare it to Android Compose navigation and libraries like Voyager.

Set up light and dark themes by defining color palettes with red and orange as primary colors, plus white and shades, and prepare resources for design based on system settings.

Reuse a single composite onboarding structure across screens to maintain consistent next button, text, and image shapes and positioning.

Implement onboarding screens for DishPal using compose multiplatform, creating image headers, string resources, and a reusable next button, then adjust paddings and alignments for Android and iOS.

Present the main screen after onboarding, featuring a header, a screen container, and button navigation for a multiplatform iOS and Android app.

Design a main screen with a header, screen container, and bottom nav bar in a max size column. Container tracks the current screen and navigation to reveal the home screen.

Configure the DishPal main screen to fill the space while excluding header and nav bar, and pass a navigate function and current screen instead of the ViewModel.

Import svg icons from the Figma design using the Android resource manager, move them to compose resources drawables, and access them in shared code after the build.

Define drawable icons, a current-screen toggle, height, padding, text size, label, and a tap callback to build a flexible navbar item; arrange as a column with image above text.

Configure the DishPal main screen navbar with home, new post, and chat items, including icons, text, selection state, and a primary tint, plus navigation callbacks and resource imports.

Explore how the home screen, header, screen container, and bottom nav bar are wired together, with onboarding advancing to home and the navigation view model displaying the main screen.

Implement bottom navigation to switch between chat and post screens using dedicated feature packages, update screen text to verify navigation, and showcase icon changes on nav items.

Create an action card in a multiplatform compose app using a material card with an icon and text, a click callback, five dpi elevation, and a 150 dpi height.

DishPal's main screen presents a top row with two action cards and uses a lazy column to load items from server, planning pull-to-refresh, postcards, and data loading via a ViewModel.

Define user and post data models and a home state. Create a home view model that loads fake posts for the DishPal screen and renders post cards in compose.

Design DishPal screen post card in compose part 1, using a column with image banner and overlays, description, and a row of icons, driven by a view model providing posts.

Load posts in the home view model's init method to populate the feed and add image banner titles, icon resources for like, share, and comments, with tint and card padding.

Learn to implement avatar with server image loading or initials, circular clip and primary background in a post card, and add a rating with compose stars and spacing tweaks.

Add camel dependency to toml and Gradle to load avatar from URL asynchronously, circle clip and background, fix crash by internet permission, CTR, and pass URL object to async painter.

Enhance the post card with an image carousel using a horizontal pager, manage a pager state to load images and update bottom indicators, and add a bottom shadow for visibility.

Load posts from an endpoint to populate the DishPal food social network. Note that mac endpoint provides dummy data, and the URL may not return food images, but this suffices.

Add the cater networking library and Kotlin serialization to enable asynchronous endpoint calls for iOS and Android, implement a post repository with an HTTP client to fetch posts.

Run the app, fix serialization by marking data classes as serializable and adding a default create user ID; the serializer analyzer errors clear and the same results appear on iOS.

Implement dependency injection with coin across a multiplatform app by organizing app, core, and feature modules, providing an http client and home viewmodel, and initializing coin in compose.

Add room to the project by configuring dependencies: room compiler, runtime, SQLite bundled, key annotations, and the KSP plugin; update Gradle properties to disable the compiler daemon for multi-platform builds.

Create a separate storage package using Room, annotate the user class as an entity with a primary key, define a dao, and implement an app database to generate the schema.

Define platform-specific instances of the local database using expect actuals, wiring the Android application context to initialize a Room database in platform-specific code.

Learn how to structure repositories with remote data sources for posts and users, save results locally, and use a generic result type to handle API errors and timeouts.

Implement on-conflict replace for the user insert query, define the application class in Android manifest, and wire the post API into the module for the post repository dependency.

Add a profile icon to the header and wire an onClick event to navigate to the new profile screen, treating profiles as a separate feature in the app.

Add a feature folder and profile screen, wire the composable from the container, and implement a profile view model with a login method calling the user repository and UI states.

Create a profile screen with a compose dialog featuring two text fields for username and password, a password keyboard, and a login button that calls the ViewModel's login method.

Leverage the profile state to update the user interface during login. The login method calls the repository and shows a welcome text with the full name on success.

Integrate the profile module into the app via dependency injection, wiring the coroutine scope, user api, user dao, repository, and viewmodel, then refine the profile dialogue and welcome screen.

Update main screen header to display the username by observing login user object changes. Propagate updates via navigation or profile view model, while minimizing launched effects in compose.

Add a parameter to the login user method in profile view model and invoke the on success callback when the user changes; run app to see the user state update.

Configure deep linking for iOS and Android by setting url types and schemes in Xcode tab, then handle it in common code via a platform event with a type message.

Explore deep linking with a stateflow platform event, update and handle it via an onEvent method across SwiftUI and Kotlin Compose, guiding entry url to a destination and manifest schema.

Implement gps location access by adding the moko permission library, configuring a permission controller and factory, and checking and requesting location permission in the home view model.

Unify iOS and Android location data by adding a Location Info class, a system date time library, and an expect location client with get location implemented for iOS.

Learn cross-platform location client implementation: iOS uses a location manager and delegate to request and deliver updates to common code; Android uses a provider client with application context.

Retrieve the Android location with the location provider client, emit an event including accuracy and system time, and wire the client through the home module and ViewModel with a log.

Fix the coin module error on iOS by wiring platform specifics to the home ViewModel. Add privacy config in Xcode and trigger unlock on location card tap.

Build the location permission flow in an Android Compose app by wiring events stateflow, switching to a fragment activity, declaring the permission in the manifest, and testing on an emulator.