GridView in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GridView.builder(
        itemCount: 50,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 4,
          mainAxisSpacing: 8,
        ), 
        itemBuilder: (context, index) {
          return Image.asset(
            "assets/image2.jpg",
            fit: BoxFit.fill,            
          );
        }),
    );
  }
}

SwiftUI:

import SwiftUI

struct ImageGridView: View {
       
    var columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    var body: some View {
        
        ScrollView {
            LazyVGrid(columns: columns) {
                ForEach(0...50, id: \.self) { data in
                    Image("Image2")
                        .resizable()
                        .aspectRatio(contentMode: ContentMode.fit)
                }
            }
            
        }
        
        
    }
}

struct ImageGridView_Previews: PreviewProvider {
    static var previews: some View {
        ImageGridView()
    }
}

Jetpack Compose:

@Composable
fun ImageGrid() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(3),
        contentPadding = PaddingValues(horizontal = 2.dp, vertical = 2.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        content = {
        items(50) {
            Image(
                modifier = Modifier
                    .clip(RectangleShape),
                contentScale = ContentScale.Fit,
                painter = painterResource(id = R.drawable.image1),
                contentDescription = "Profile image"
            )

        }
    })
}