I'm trying to make an increment counter application in Jetpack Compose. I've divided each widget across separate files. I have the text widget that displays the number on one file, the button that increases the number on another file. and I'm putting them both together on the main file.
There is a problem when importing the widgets over to the main file. The function to increase the number is located in the file that the number text widget is located in, not the main file, so the function is not recognized.
Here is the file containing the number text widget and the function to increase the number.
@Composable
fun Number(){
var number by remember {
mutableIntStateOf(0)
}
fun increaseNumber(){
number++
}
Text(
text = number.toString(),
style = TextStyle(
color = Color.DarkGray,
fontSize = 30.sp,
)
)
}
Here is the file containing the button to increase the number.
@Composable
fun AddButton(onClick: () -> Unit) {
IconButton(onClick = onClick) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add Button",
modifier = Modifier.size(width = 30.dp, height = 30.dp)
)
}
}
Here is the main file
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp()
}
}
}
@Composable
fun MyApp() {
MaterialTheme {
Surface(color = Color.White, modifier = Modifier.fillMaxSize()) {
MainPage()
}
}
}
@Composable
fun MainPage() {
Row (
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
AddButton(onClick = {increaseNumber()})
Number()
}
}
I have the increaseNumber() function in the onClicked parameter for the AddButton Composable but it won't recognize it because it's in a different file. How do I import the increaseNumber() function from the number file on to the main file. Thanks for any help.