Jetpack Compose Simple Todo App - Jetpack-compose Typing CST Test

Jetpack Compose Simple Todo App — Jetpack-compose Code

Demonstrates a simple Jetpack Compose app with a Todo list, adding tasks, and displaying them using Composables and state management.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
		TodoApp()
		}
	}
}

@Composable
fun TodoApp() {
	var todos by remember { mutableStateOf(listOf<String>()) }
	var newTodo by remember { mutableStateOf("") }

	Column(modifier = Modifier.padding(16.dp)) {
		Row {
		TextField(value = newTodo, onValueChange = { newTodo = it }, modifier = Modifier.weight(1f))
		Spacer(modifier = Modifier.width(8.dp))
		Button(onClick = {
		if(newTodo.isNotBlank()) {
		todos = todos + newTodo
		newTodo = ""
		}
		}) {
		Text("Add")
		}
		}
		Spacer(modifier = Modifier.height(16.dp))
		Column {
		todos.forEach { todo -> Text(todo) }
		}
	}
}

Jetpack-compose Language Guide

Jetpack Compose is Android’s modern toolkit for building native UI using Kotlin, offering a declarative approach to designing app interfaces and simplifying UI development for Android.

More Jetpack-compose Typing Exercises

Practice Other Languages