I am making a scaffold and ModalBottomSheetLayout. ModalBottomSheetLayout contains scaffold and scaffold contains bottom bar and top bar but The codes are not very pleasing to the eye and I will have to copy them again during use on another screen. I couldn't do it myself because they are connected with each other, for example ModalBottomSheetLayout needs to use bottomSheetState and when a fab button is clicked, I close or open the bottomsheet, so I also need the bottomSheetState ui. So how can I write Scaffold bottom bar and top bar and BottomSheet logic in viewmodel?
Hear is my code:
HomeScreen.kt
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun HomeScreen(
navHostController: NavHostController,
sharedViewModel: SharedViewModel,
) {
val image = sharedViewModel.userProfileImg
val navBackStackEntry by navHostController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val coroutineScope = rememberCoroutineScope()
val bottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmStateChange = {
it != ModalBottomSheetValue.Expanded
})
BackHandler(bottomSheetState.isVisible) {
coroutineScope.launch { bottomSheetState.hide() }
}
ModalBottomSheetLayout(
sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
sheetState = bottomSheetState,
sheetContent = {
Column(modifier = Modifier.padding(4.dp)) {
Text(
modifier = Modifier.padding(12.dp),
text = "add",
fontSize = 16.sp,
fontWeight = FontWeight.Medium
)
Divider()
for (item in BottomSheetItemList().bottomSheetList.indices) {
BottomSheetRowItem(
text = BottomSheetItemList().bottomSheetList[item].title,
imgId = BottomSheetItemList().bottomSheetList[item].img
)
}
}
}
){
Scaffold(
backgroundColor = Color.Transparent,
topBar = {
Box(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 4.dp)
.padding(vertical = 4.dp)
) {
Image(
painter = rememberAsyncImagePainter(image),
contentDescription = "",
modifier = Modifier
.align(Alignment.CenterStart)
.padding(4.dp)
.width(40.dp)
.height(40.dp)
.clip(CircleShape)
.clickable {
navHostController.navigate(DashBoardScreen.AccountScreen.route)
})
Image(
modifier = Modifier
.padding(5.dp)
.align(Alignment.Center),
painter = painterResource(id = R.drawable.ic_diyetkolik_logo),
contentDescription = "logo"
)
}
}, bottomBar = {
Box(modifier = Modifier.fillMaxWidth()) {
BottomAppBar(modifier = Modifier.fillMaxWidth()) {
BottomNavigation {
BottomAppBarItems.values().toList().forEach { item ->
AddItem(
screen = item,
currentDestination = currentDestination,
navController = navHostController
)
}
}
}
FancyCenterItem(
modifier = Modifier
.align(Alignment.Center),
centerItemIcon = ImageVector.vectorResource(R.drawable.ic_bottom_bar_fab),
contentColor = DefaultDYTColor,
centerItemOnClick = {
coroutineScope.launch {
if (bottomSheetState.isVisible)
bottomSheetState.hide()
else
bottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
}
},
backgroundColor = Color.Transparent
)
}
}) { padding ->
Column(
modifier = Modifier
.fillMaxWidth()
.padding(padding)
.verticalScroll(rememberScrollState())
) {
Spacer(modifier = Modifier.padding(20.dp))
HomeEditBtnAndText(text = "", buttonText = "Düzenle", onclickButton = {
navHostController.navigate(BottomBarScreen.PlansScreen.route)
})
HomeContentCard(
imageId = R.drawable.ic_dashboard_food,
content = "Yemek",
content2 = "0 Kcal, 2000 kalan",
buttonImgId = R.drawable.ic_dashboard_plus_math_sign
)
HomeContentCard(
imageId = R.drawable.ic_dashboar_water,
content = "Su",
content2 = "0 / 2lt",
buttonImgId = R.drawable.ic_dashboard_plus_math_sign
)
HomeContentCard(
imageId = R.drawable.ic_dashboard_step,
content = "",
content2 = "Apple healtden çek",
buttonImgId = R.drawable.ic_dashboard_plug_sign
)
HomeContentCard(
imageId = R.drawable.ic_dashboard_exercise,
content = "",
content2 = "0 Kcal",
buttonImgId = R.drawable.ic_dashboard_plus_math_sign
)
HomeContentCard(
imageId = R.drawable.ic_dashboard_weight,
content = "",
content2 = "54.5",
buttonImgId = R.drawable.ic_dashboard_plus_math_sign
)
HomeContentCard(
imageId = R.drawable.ic_dashboard_calorie,
content = "",
content2 = "",
buttonImgId = R.drawable.ic_dashboard_search
)
}
}
}
}
FancyCenterItem is my fab button. When I click fab button bottomsheet open
