Circular Image in Flutter – SwiftUI – Jetpack Compose

Flutter :

import 'package:flutter/material.dart';

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            const CircleAvatar(
              backgroundColor: Colors.pink,
              radius: 54,
              child: CircleAvatar(
                 backgroundImage: AssetImage("assets/image.jpg"),
                radius: 50,
              ),
            ),
          
    
          ],
        ),
      ),
    );
  }
}

SwiftUI :

import SwiftUI

struct LoginView: View {
    @State var email = ""
    @State var password = ""
    var body: some View {
        
        VStack {
            Image("Image2")
                .resizable()
                .aspectRatio(contentMode: ContentMode.fill)
                .frame(width: 100, height: 100, alignment: .center)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.pink,lineWidth: 4))              
           
          }
    }
}

struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()
    }
}

Jetpack Compose :

fun Login() {
   
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {

        Image(
            modifier = Modifier
                .size(100.dp,100.dp)
                .clip(CircleShape)
                .border(
                    width = 4.dp,
                    color = Color.Red,
                    shape = CircleShape
                )
            ,
            contentScale = ContentScale.Crop,
            painter = painterResource(id = R.drawable.image1),
            contentDescription = "Profile Image")

       
    }
}