Card in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.indigo,
      elevation: 8,
      shadowColor: Colors.green,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16)
      ),
      child: Row(
        children: [
          const Padding(
            padding: EdgeInsets.all(16),
            child:  CircleAvatar(
              backgroundColor: Colors.white,
              radius: 54,
              child: CircleAvatar(
                backgroundImage: AssetImage("assets/image2.jpg"),
                radius: 50,
              ),
            ),
          ),

          const SizedBox(width: 8,),

          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children:  [
              Text(
                "Title",
                style: Theme.of(context).textTheme.headline5?.copyWith(
                  color: Colors.white,
                ),
              ),
              Text(
                "Subtitle", 
                style: Theme.of(context).textTheme.subtitle1?.copyWith(
                  color: Colors.white,
                ),
              ),
            ],
          )
        ],
      ),

    );
  }
}

SwiftUI:

import SwiftUI

struct CardView: View {
    var body: some View {
        
        ZStack {
            RoundedRectangle(cornerRadius: 16, style: .continuous)
                .fill(.indigo)
                .frame(width: .infinity, height: 200)
                .shadow(color: Color.green, radius: 8)
            
            HStack(alignment: .center) {
                Image("Image2")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 80,height: 80)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color(.white), lineWidth: 2))
                    .padding(8)
               
                
                VStack(alignment: .leading) {
                    
                    Text("Title")
                        .foregroundColor(Color.white)
                        .font(.headline)
                    
                    Text("Sub Title")
                        .foregroundColor(Color.white)
                        .font(.subheadline)
                }
                .padding(8)
                
                Spacer()
                                                 
            }
            
        }
        .padding(16)
        
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView()
    }
}

Jetpack Compose:

@Composable
fun ProfileCardView() {

    Card(
        shape = RoundedCornerShape(16.dp),
        backgroundColor = Color(0xFF3F51B5),
        elevation = 16.dp,
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .height(200.dp)
            .shadow(
                16.dp,
                RoundedCornerShape(16.dp),
                ambientColor = Color.Green,
                spotColor = Color.Green
            )
    ){

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                modifier = Modifier
                    .padding(8.dp)
                    .size(100.dp, 100.dp)
                    .clip(CircleShape)
                    .border(
                        width = 4.dp,
                        color = Color.White,
                        shape = CircleShape
                    )

                ,
                contentScale = ContentScale.Crop,
                painter = painterResource(id = R.drawable.image1),
                contentDescription = "Profile image"
            )

            Column(
                modifier = Modifier.padding(8.dp)
            ) {
                Text(
                    text = "Title",
                    color = Color.White,
                    style = MaterialTheme.typography.h5
                )

                Text(
                    text = "Sub Title",
                    color = Color.White,
                    style = MaterialTheme.typography.subtitle1
                )
            }


        }

    }
}