jetpack compose - Navigation arguments data type

MainActivity.kt

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument


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


    @Composable
    fun GetScaffold(){
        val navController:NavHostController = rememberNavController()

        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text(
                        text = "Compose - Nav Arguments Data Type"
                    )},
                    backgroundColor = Color(0xFFC0E8D5),
                )
            },
            content = {MainContent(navController)},
            backgroundColor = Color(0xFFEDEAE0),
        )
    }


    @Composable
    fun MainContent(navController: NavHostController){
        Box(
            modifier = Modifier.fillMaxSize(),
        ){
            MainNavigation(navController)
        }
    }


    @Composable
    fun MainNavigation(navController: NavHostController){
        NavHost(
            navController = navController,
            startDestination = "listScreen"
        ){
            composable("listScreen"){ListScreen(navController)}

            composable(
                route = "detailsScreen/{colorName}/{hexValue}",
                arguments = listOf(
                    navArgument("colorName") { type = NavType.StringType },
                    navArgument("hexValue") { type = NavType.LongType }
                )
            ){ backStackEntry ->
                DetailsScreen(
                    backStackEntry.arguments?.getString("colorName"),
                    backStackEntry.arguments?.getLong("hexValue")
                )
            }
        }
    }


    @Composable
    fun ListScreen(navController: NavController){
        val maps = mapOf<String,Long>(
            Pair("Brick red",0xFFCB4154),
            Pair("Baby blue",0xFF89CFF0),
            Pair("Apple green",0xFF8DB600),
            Pair("Burnt sienna",0xFFE97451),
            Pair("Cameo pink",0xFFEFBBCC)
        )
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(4.dp),
            verticalArrangement = Arrangement.spacedBy(4.dp),
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = "List Screen",
                style = MaterialTheme.typography.h4,
                modifier = Modifier.padding(bottom = 24.dp)
            )

            maps.forEach {
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(1.dp)
                        .height(50.dp)
                        .clickable {
                            navController
                                .navigate(
                                    "detailsScreen/${it.key}/${it.value}"
                                )
                        }
                ) {
                    Box(modifier = Modifier
                        .fillMaxSize()
                        .wrapContentSize(Alignment.Center)) {
                        Text(text = it.key)
                    }
                }
            }
        }
    }


    @Composable
    fun DetailsScreen(colorName:String?, hexValue:Long?){
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(hexValue?: 0xFFFFFF)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "${colorName?.apply {}}",
                style = MaterialTheme.typography.h4,
                modifier = Modifier.padding(bottom = 24.dp),
                textAlign = TextAlign.Center
            )
        }
    }
}