Fragment with Horizontal Pager

Question

I am using fragments with a Horizontal Pager. Currently, I have three fragments, but despite trying something, it doesn't work. The toast is displayed, but the fragment is not visible.

Pager Function

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun IntroPager() {

val pagerState = rememberPagerState(pageCount = { 3 })
val context = LocalContext.current

HorizontalPager(state = pagerState, modifier = Modifier.fillMaxSize()) { page: Int ->

    Box (modifier = Modifier.fillMaxSize() , contentAlignment = Alignment.Center){

        when (page) {
            0 -> {
                Toast.makeText(context, "Intro 1", Toast.LENGTH_SHORT).show()
                IntroFragment1()
            }
            1 -> {
                Toast.makeText(context, "Intro 2", Toast.LENGTH_SHORT).show()
                IntroFragment2()
            }

            2 -> {
                Toast.makeText(context, "Intro 3", Toast.LENGTH_SHORT).show()
                IntroFragment3()
            }

            else -> error("Invalid page: $page")
        }
    }
  }
}

Fragment 1

class IntroFragment1 : Fragment() {
override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    return ComposeView(requireContext()).apply {
       setContent {

           Column (Modifier.fillMaxSize(),
               verticalArrangement = Arrangement.Center,
               horizontalAlignment = Alignment.CenterHorizontally){
               Text(text = "Intro Fragment 1")
           }

       }
    }
  }
}

other two fragments are the same as the first one.

Answer 1

Instead of providing Fragments in the HorizontalPager, you can simply provide Composable functions like this:

when (page) {
    0 -> {
        Toast.makeText(context, "Intro 1", Toast.LENGTH_SHORT).show()
        IntroComposable1()
    }
    1 -> {
        Toast.makeText(context, "Intro 2", Toast.LENGTH_SHORT).show()
        IntroComposable2()
    }
    2 -> {
        Toast.makeText(context, "Intro 3", Toast.LENGTH_SHORT).show()
        IntroComposable3()
    }
    else -> error("Invalid page: $page")
}

And then create three Compoables similar to

@Composable
fun IntroComposable1() {

    Text(
        text = "IntroComposable1"
    )
}

@Composable
fun IntroComposable2() {

    Text(
        text = "IntroComposable2"
    )
}