Skip to content

kotlin-hands-on/get-started-with-cm

Repository files navigation

Official project License

Get started with Compose Multiplatform

This repository contains four separate projects. Each project accompanies corresponding sections of the Get started with Compose Multiplatform tutorial. You can open and run each project or follow the tutorial manually and create your own.

ComposeDemoStage1

This project reflects steps 1, 2, and 3 of the tutorial.

In this project, we:

  1. Create a project using the Kotlin Multiplatform wizard.
  2. Add a dependency on the kotlinx-datetime library.
  3. Add the todaysDate() function that returns current date.
  4. Invoke this function from the App composable.

That's how your application should look at the end of the Modify the project step.

ComposeDemoStage2

This project reflects the changes made at the beginning of the fourth step of the tutorial.

In this project, we:

  1. Rewrite the App composable from scratch, removing unnecessary imports and code.
  2. Alter the main() function to improve the window rendering on desktop.
  3. Add support for user input and style the composable.
  4. Create and invoke the currentTimeAt() function that returns current time at a particular location.
  5. Improve the appearance of composables.

That's how your application should look at the end of the Improve the style section on the fourth step of the tutorial.

ComposeDemoStage3

This project reflects the changes made in the Refactor the design section on the fourth step of the tutorial.

In this project, we change the application design. Users can now select items from a dropdown menu instead of manually using the text field.

ComposeDemoStage4

This project reflects the changes made in the Introduce images section on the fourth step of the tutorial.

In this project, we:

  1. Include images in the composeResources folder of the application.
  2. Enhance the dropdown menu to display each item with an image.

This is the final stage of the tutorial. That's how your application should look at the end of the Create your own application step.