AppBar in Flutter – SwiftUI – Jetpack Compose

mobile academy

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(
        title: const Text("Home"),
        actions: [
          IconButton(
            onPressed: () {

            }, 
            icon: const Icon(Icons.add)),
          IconButton(
            onPressed: () {

            }, 
            icon: const Icon(Icons.delete))
        ],
      ),
      body: Center(
        child: 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"),
            )

          ],
        ),
      ),
    );
  }
}

SwiftUI:

import SwiftUI

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

                
            }
            .navigationTitle("Home")
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbarBackground(Color.pink, for: .navigationBar)
            .toolbar {
                ToolbarItemGroup {
                    Image(systemName: "trash")
                    Text("Add")
                }
            }
        }
        
    }
}

Jetpack Compose:

@Composable
fun HomeNavScreen(navHostController: NavHostController) {

    Scaffold (
        topBar = {
            TopAppBar(
                title = { Text(text = "Home")},
                navigationIcon = {
                    val homeIcon = Icons.Default.Home
                    Icon(imageVector = homeIcon , contentDescription = "home")
                },
                actions = {
                    val addIcon = Icons.Default.Add
                    Icon(imageVector = addIcon , contentDescription = "add")
                    val deleteIcon = Icons.Default.Delete
                    Icon(imageVector = deleteIcon , contentDescription = "home")
                }
            )
        }
            )
    {
        Column (
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues = it)
        ) {

            Text(text = "Home")

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

            }

        }

    }



}
Select your currency
USD United States (US) dollar