#7 - Add OnBoarding Page

app/src/main/java/com/io1/todo/feature/onboarding/view/OnboardingScreen.kt

@@ -1,42 +1,121 @@
 package com.io1.todo.feature.onboarding.view
 
 import android.annotation.SuppressLint
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material3.Button
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.HorizontalPagerIndicator
+import com.io1.todo.feature.onboarding.viewmodel.OnboardingViewModel
+import com.io1.todo.feature.onboarding.utils.OnBoardingPage
 
+@ExperimentalAnimationApi
+@ExperimentalPagerApi
 @Composable
 fun OnboardingScreenRoute(onMainButtonClick: () -> Unit) {
     OnboardingScreen(onMainButtonClick = onMainButtonClick)
 }
 
 @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@ExperimentalAnimationApi
+@ExperimentalPagerApi
 @Composable
-fun OnboardingScreen(onMainButtonClick: () -> Unit = {}) {
-    Scaffold(modifier = Modifier
-        .fillMaxSize(),
-        containerColor = Color.Black,
-        topBar = {
+fun OnboardingScreen(
+    onMainButtonClick: () -> Unit = {},
+    onboardingViewModel: OnboardingViewModel = hiltViewModel()
+) {
+    val pages = listOf(
+        OnBoardingPage.First,
+        OnBoardingPage.Second,
+        OnBoardingPage.Third
+    )
+
+    val pagerState = com.google.accompanist.pager.rememberPagerState()
 
-        },
-        content = {
-            Column(
-                modifier = Modifier.fillMaxSize(),
-                verticalArrangement = Arrangement.Center,
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Text(text = "Onboarding", color = Color.White)
-                Button(onClick = { onMainButtonClick() }) {
+    Column (modifier = Modifier.fillMaxSize()){
+        HorizontalPager(
+            modifier = Modifier.weight(10f),
+            count = 3,
+            state = pagerState,
+            verticalAlignment = Alignment.Top
+        ) { position ->
+            PagerScreen(onBoardingPage = pages[position])
+        }
+        HorizontalPagerIndicator(
+            modifier = Modifier
+                .align(Alignment.CenterHorizontally)
+                .weight(1f),
+            pagerState = pagerState
+        )
+        Row(
+            modifier = Modifier
+                .padding(horizontal = 40.dp),
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            AnimatedVisibility(
+                modifier = Modifier.fillMaxWidth(),
+                visible = pagerState.currentPage == 2 ) {
+                Button(
+                    onClick = { onMainButtonClick() }) {
                     Text(text = "Go to main screen")
+                    onboardingViewModel.saveOnBoardingState(completed = true)
                 }
             }
         }
-    )
+    }
+}
+@Composable
+fun PagerScreen(onBoardingPage: OnBoardingPage) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Top
+    ) {
+        Image(
+            modifier = Modifier
+                .fillMaxWidth(0.5f)
+                .fillMaxHeight(0.7f),
+            painter = painterResource(id = onBoardingPage.image),
+            contentDescription = "Pager Image"
+        )
+        Text(
+            modifier = Modifier
+                .fillMaxWidth(),
+            text = onBoardingPage.title,
+            fontSize = MaterialTheme.typography.h4.fontSize,
+            fontWeight = FontWeight.Bold,
+            textAlign = TextAlign.Center
+        )
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 40.dp)
+                .padding(top = 20.dp),
+            text = onBoardingPage.description,
+            fontSize = MaterialTheme.typography.subtitle1.fontSize,
+            fontWeight = FontWeight.Medium,
+            textAlign = TextAlign.Center
+        )
+    }
 }

app/src/main/java/com/io1/todo/feature/onboarding/viewmodel/OnboardingViewModel.kt

@@ -1,9 +1,21 @@
 package com.io1.todo.feature.onboarding.viewmodel
 
 import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.io1.data.datastore.DataStoreRepository
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 @HiltViewModel
-class OnboardingViewModel @Inject constructor() : ViewModel() {
+class OnboardingViewModel @Inject constructor(
+    private val repository: DataStoreRepository
+) : ViewModel() {
+
+    fun saveOnBoardingState(completed: Boolean) {
+        viewModelScope.launch(Dispatchers.IO) {
+            repository.saveOnBoardingState(completed = completed)
+        }
+    }
 }