Navigation in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';
import 'package:flutter_ui_demo/screen/detail_screen.dart';

class NavScreen extends StatelessWidget {
  const NavScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("Home"),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => const DetailScreen())
              );

            }, 
            child: const Text("Go To Next"),
          )

        ],
      ),
    );
  }
}


/// Detail screen 


import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  const DetailScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("Detail"),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();

            }, 
            child: const Text("Go back"),
          )

        ],
      ),
    );
  }
}

SwiftUI:

import SwiftUI

struct AppNavigationView: View {
   
    var body: some View {
        
        NavigationStack {
            VStack {
                Text("Home")
                
                NavigationLink {
                    DetailNavigationView()
                } label: {
                    Text("Go To Detail")
                }

            }
            .navigationTitle("Home")
            
        }

    }
}

struct DetailNavigationView: View {
    
    var body: some View {
        VStack {
            Text("Detail")
            NavigationLink {
                StockNavigationView()
            } label: {
                Text("Go To Stock")

            }

            
        }
    }
}

struct StockNavigationView: View {
    var body: some View {
        VStack {
            Text("Stock")
            
        }
    }
}

struct AppNavigationView_Previews: PreviewProvider {
    static var previews: some View {
        AppNavigationView()
    }
}

Jetpack Compose

package com.example.composeuidemo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {

        composable(route = "home") {
            MainScreen(navController)
        }

        composable(route = "detail") {
            DetailScreen(navController)
        }
        composable(route = "stock") {
            StockScreen(navController)
        }
    }

}

@Composable
fun MainScreen(navHostController: NavHostController) {
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
            ) {
        Text(text = "Home")
        OutlinedButton(
            onClick = {
                navHostController.navigate("detail")

            }) {
            Text(text = "Next Screen")

        }

    }
}

@Composable
fun DetailScreen(navHostController: NavHostController) {
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()

    ) {
        Text(text = "Detail")
        OutlinedButton(
            onClick = {
                navHostController.navigate("stock")
            }) {
            Text(text = "Go To Stock")

        }

    }
}

@Composable
fun StockScreen(navHostController: NavHostController) {
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()

    ) {
        Text(text = "Stock")
        OutlinedButton(
            onClick = {
                navHostController.popBackStack()
            }) {
            Text(text = "Back To Detail")

        }

    }
}