ListView in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) {
            return Card(
              color: Colors.indigo,
              elevation: 8,
              shadowColor: Colors.green,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16)
              ),
              child: Row(
                children:  [
                  const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      radius: 54,
                      child: CircleAvatar(
                        backgroundImage: AssetImage("assets/image2.jpg"),
                        radius: 50,
                      ),
                    ),
                  ),
                  
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Title ${index + 1}",
                        style:  Theme.of(context).textTheme.headline5?.copyWith(
                          color: Colors.white
                        ),
                      ),
                      Text(
                        "Sub Title",
                        style:  Theme.of(context).textTheme.subtitle1?.copyWith(
                          color: Colors.white
                        ),
                      )
                    ],
                  )

                ],
              ),
            );
          
        }),
      ),
    );
  }
}

SwiftUI:

import SwiftUI

struct ListView: View {
    var body: some View {
        List(1...50, id:\.self) { num in
            ZStack {
                
                RoundedRectangle(cornerRadius: 16, style: .continuous)
                    .fill(.indigo)
                    .frame(width: .infinity, height: 200)
                    .shadow(color: .green, radius: 16)
                
                HStack {
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 100, height: 100, alignment: .center)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.white,lineWidth: 4))
                        .padding(8)
                    
                    VStack(alignment: .leading) {
                        Text("Title \(num)")
                            .foregroundColor(Color.white)
                        
                        Text("Sub Title")
                            .foregroundColor(Color.white)
                    }
                    .padding(8)
                    
                    Spacer()
                }
            }
            .padding(8)
            
        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

Jetpack Compose:

@Composable
fun ProfileCardList() {
    val profiles = (1..50).toList()
   
    LazyColumn() {
        items(items = profiles) {data ->
            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 $data",
                            color = Color.White,
                            style = MaterialTheme.typography.h5
                        )

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


                }

            }
        }
    }

}