Bottom Navigation in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';
import 'package:flutter_ui_demo/screen/card_view_screen.dart';
import 'package:flutter_ui_demo/screen/grid_view_screen.dart';
import 'package:flutter_ui_demo/screen/list_view_screen.dart';

class BottomNavScreen extends StatefulWidget {
  const BottomNavScreen({Key? key}) : super(key: key);

  @override
  State<BottomNavScreen> createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  int index = 0;

  final body = [
    const ListViewScreen(),
    const GridViewScreen(),
    const CardViewScreen()

  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(      
      body: body[index],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (value) {
          setState(() {
            index = value;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home'
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.image),
            label: 'Grid'
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard),
            label: 'Card'
          ),
        ]
      ),
    );
  }
}

SwiftUI:

import SwiftUI

struct BottomNavView: View {    
    
    var body: some View {
        TabView {
            ListView()
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            ImageGridView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Image")
                }
            CardView()
                .tabItem {
                    Image(systemName: "bell")
                    Text("Card")
                }
        }
    }
}

struct BottomNavView_Previews: PreviewProvider {
    static var previews: some View {
        BottomNavView()
    }
}

Jetpack Compose:

Add the Jetpack Compose dependencies to build.gradel

 def nav_version = "2.5.3"
 implementation "androidx.navigation:navigation-compose:$nav_version"

package com.example.composeuidemo

import android.annotation.SuppressLint
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavDestination.Companion.hierarchy
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController


sealed class BottomNavigationItem(val route: String, val label: String, val icon: ImageVector) {
    object Home: BottomNavigationItem("home","Home", Icons.Default.Home)
    object Grid: BottomNavigationItem("image","Image", Icons.Default.ShoppingCart)
    object Card: BottomNavigationItem("card","Card", Icons.Default.Person)
}

@Composable
fun BottomBarGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = BottomNavigationItem.Home.route) {

        composable(
            BottomNavigationItem.Home.route,
        ) {
            HomeScreen()
        }

        composable(
            BottomNavigationItem.Grid.route
        ) {
            ImageGrid()
        }

        composable(
            BottomNavigationItem.Card.route
        ) {
            CardListView()
        }
    }
}


@Composable
fun MyApp() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = { BottomNavBar(navController) }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                    .fillMaxSize()
                    .padding(bottom = paddingValues.calculateBottomPadding())
            ) {

            BottomBarGraph(navController = navController)
        }

    } 
}

@Composable
fun BottomNavBar(navController: NavHostController) {
    val items = listOf(
        BottomNavigationItem.Home,
        BottomNavigationItem.Grid,
        BottomNavigationItem.Card,
    )

    val navBackStack by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStack?.destination

    BottomNavigation() {
        items.forEach { item ->
            BottomNavigationItem(
                label = { Text(text = item.label)},
                icon = { Icon(imageVector = item.icon, contentDescription = item.label)},
                selected = currentDestination?.hierarchy?.all { it.route == item.route } == true,
                selectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.high),
                unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
                onClick = {
                    navController.navigate(item.route) {
                        popUpTo(navController.graph.findStartDestination().id)
                        launchSingleTop = true
                    }
                }
            )
        }

    }

}

@Preview(showSystemUi = true)
@Composable
fun AppPreview() {
    MyApp()
}