compose-color-picker
voyager
compose-color-picker | voyager | |
---|---|---|
1 | 13 | |
8 | 2,327 | |
- | - | |
10.0 | 8.1 | |
over 1 year ago | 4 days ago | |
Kotlin | Kotlin | |
Apache License 2.0 | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
compose-color-picker
voyager
-
Building a subscription tracker Desktop and iOS app with compose multiplatform
// composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreenViewModel.kt package ui.screens.expenses import Expense import cafe.adriel.voyager.core.model.StateScreenModel import cafe.adriel.voyager.core.model.screenModelScope import io.github.oshai.kotlinlogging.KotlinLogging import kotlinx.coroutines.delay import kotlinx.coroutines.launch private val logger = KotlinLogging.logger {} /** * Base state definition for our screen */ data class ExpensesScreenState( val data: List, ) { /** * Computed property to get the avg price of the expenses */ val avgExpenses: String get() = data.map { it.price }.average().toString() } /** * View model of our screen * More about ViewModels below */ class ExpensesScreenViewModel : StateScreenModel( ExpensesScreenState( data = listOf(), ), ) { init { /** * Simulating the "API request" by adding some latency * and fake data */ screenModelScope.launch { logger.info { "Fetching expenses" } delay(3000) mutableState.value = ExpensesScreenState( data = listOf( Expense( id = "1", name = "Rent", icon = "๐ ", price = 102573, ), Expense( id = "2", name = "Apple one", icon = "๐", price = 2595, ), Expense( id = "3", name = "Netflix", icon = "๐บ", price = 1299, ), ) ) } } } // composeApp/src/commonMain/kotlin/ui/screens/expenses/ExpensesScreen.kt package ui.screens.expenses import Expense import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import cafe.adriel.voyager.core.model.rememberScreenModel import cafe.adriel.voyager.core.screen.Screen import io.github.oshai.kotlinlogging.KotlinLogging import ui.theme.BorderRadius import ui.theme.IconSize import ui.theme.Spacing private val logger = KotlinLogging.logger {} /** * Voyager screen, since there are no params * we can define it as a plain `object` */ object ExpensesScreen : Screen { @Composable override fun Content() { /** * Instantiating our ViewModel * https://voyager.adriel.cafe/screenmodel */ val viewModel = rememberScreenModel { ExpensesScreenViewModel() } /** * More about this below, but for now, differently than JS * we handle values over time with Kotlin coroutine `Flow's` (in this case, `StateFlow`) * you can think of it as something similar to `Observables` in reactive programming */ val state by viewModel.state.collectAsState() val onExpenseClicked: (Expense) -> Unit = { logger.info { "Redirect to edit screen" } } Scaffold( topBar = { CenterAlignedTopAppBar( title = { Text("My subscriptions", style = MaterialTheme.typography.titleMedium) }, ) }, bottomBar = { BottomAppBar( contentPadding = PaddingValues(horizontal = Spacing.Large), ) { Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { Column { Text( "Average expenses", style = MaterialTheme.typography.bodyLarge, ) Text( "Per month".uppercase(), style = MaterialTheme.typography.bodyMedium, ) } Text( state.avgExpenses, style = MaterialTheme.typography.labelLarge, ) } } }, ) { paddingValues -> Box(modifier = Modifier.padding(paddingValues)) { ExpenseList(state.data, onExpenseClicked) } } } } @Composable private fun ExpenseList( expenses: List, onClick: (expense: Expense) -> Unit, ) { LazyColumn( verticalArrangement = Arrangement.spacedBy(Spacing.Small_100), ) { items( items = expenses, key = { it.id }, ) { expense -> ExpenseListItem( expense = expense, onClick = { logger.info { "Clicked on ${expense.name}" } onClick(expense) }, ) } item { Spacer(Modifier.height(Spacing.Medium)) } } } @Composable private fun ExpenseListItem( expense: Expense, onClick: () -> Unit = {}, ) { Surface( modifier = Modifier .fillMaxWidth() .padding(horizontal = Spacing.Medium) .defaultMinSize(minHeight = 56.dp), onClick = onClick, shape = RoundedCornerShape(BorderRadius.small), color = MaterialTheme.colorScheme.surfaceVariant, ) { Row( modifier = Modifier .padding( horizontal = Spacing.Medium_100, vertical = Spacing.Small_100, ), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(Spacing.Large), ) { Text( text = expense.icon ?: "", fontSize = IconSize.Medium, modifier = Modifier.defaultMinSize(minWidth = 24.dp), ) Text( text = expense.name, style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onSurfaceVariant), modifier = Modifier.weight(1f), ) Text( text = (expense.price).toString(), style = MaterialTheme.typography.bodyLarge.copy(color = MaterialTheme.colorScheme.onSurfaceVariant), ) } } }
-
Kotlin Routing - routing everything
KMP use cases increasing, developers migrating or creating your projects to KMP, no routing system or navigation available to KMP (Except Voyager), that was the opportunity to create one.
- Are Fragments in Android going to be deprecated in favor of Jetpack Compose?
-
Why compose multiplatform don't get more popular?
If I were to start a project right now, I'd use https://github.com/adrielcafe/voyager although, it doesn't support Web Canvas or iOS yet I don't think.
-
Which navigation library for compose do you suggest?
Voyager has some bugs (apparently SavedStateHandle doesn't work and the PR is open since Nov 24), Appyx is nice but I hear it's laggy (but honestly, everything in Compose is laggy all the time, so if you use Compose, that's pretty standard tbh), I don't know enough about Navigation-Reimagined to tell you, Compose-Destinations is a codegenerator over Navigation-Compose so you drag in Accompanist-Navigation to have basic screen transitions which is pre-alpha tech.
-
ViewModel: for UI business, not UI operations ๐ฎ
Voyager
-
voyager VS Appyx - a user suggested alternative
2 projects | 19 Sep 2022
-
What's the Current State of Android Developmentโข?
https://github.com/adrielcafe/voyager/issues/42 open since January
-
The State of Navigation in Jetpack Compose
Yes, I've checked (it doesn't). I've also read AndroidScreenLifecycleOwner's source code, and I don't see a way for it to ever go to the ON_PAUSE state.
-
4 reasons Jetpack Compose is better than XML
Using any of the 5 prominent community alternatives is a better approach (even though most people hoping to use the docs as if it was like, written for stable code, will muck around with their apps crashing if the user inputs a & symbol). I have this thing but I'd consider taking a look at https://github.com/adrielcafe/voyager or maybe https://github.com/olshevski/compose-navigation-reimagined
What are some alternatives?
ComposeScrollbars - ComposeScrollbars: Polish your Android Compose UI with advanced scrollbars
Decompose - Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing (navigation) and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.)
compose-color-picker - A color picker for Jetpack compose ๐จ
compose-navigation-reimagined - ๐ Type-safe navigation library for Jetpack Compose
awesome-jetpack-compose-learning-resources - ๐ A continuously updated list of learning Jetpack Compose for Android apps.
compose-destinations - Annotation processing library for type-safe Jetpack Compose navigation with no boilerplate.
PreCompose - Compose Multiplatform Navigation && State Management
compose-shared-element - Experiment with SharedElement transition in Jetpack Compose, inspired by Flutter Hero widget.
navigation-compose-typed - Type-safe arguments for Jetpack Navigation Compose using Kotlinx.Serialization
compose-richtext - A collection of Compose libraries for advanced text formatting and alternative display types.
Appyx - Model-driven navigation + UI components with gesture control for Compose Multiplatform
kotlin-composable-architecture - Companion for the Swift Composable Architecture. A library for building applications in a consistent and understandable way, with composition, testing, and ergonomics in mind.