Stack in Flutter – SwiftUI – Jetpack Compose

Flutter:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.green,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16)
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              height: 200,
            ),
          ),
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.yellow,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16)
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width / 1.5,
              height: 150,
            ),
          ),
          DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.red,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(16)
            ),
            child: SizedBox(
              width: MediaQuery.of(context).size.width / 2,
              height: 100,
            ),
          ),

        ],
      ),
    );
  }
}

SwiftUI:

import SwiftUI

struct StackView: View {
    var body: some View {
        
        ZStack {
            RoundedRectangle(cornerRadius: 16, style: .circular)
                .fill(.green)
                .frame(width: .infinity, height: 200)
            
            RoundedRectangle(cornerRadius: 16, style: .circular)
                .fill(.yellow)
                .frame(width: 300, height: 150)
            
            RoundedRectangle(cornerRadius: 16, style: .circular)
                .fill(.red)
                .frame(width: 200, height: 100)
            
            
        }
        
    }
}

struct StackView_Previews: PreviewProvider {
    static var previews: some View {
        StackView()
    }
}

Jetpack Compose:

@Composable
fun StackView() {
    Box(modifier = Modifier.fillMaxWidth()) {
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxWidth()
            .height(200.dp)
        )
        Box(modifier = Modifier
            .background(Color.Yellow)
            .width(300.dp)
            .height(150.dp)
        )
        Box(modifier = Modifier
            .background(Color.Red)
            .width(200.dp)
            .height(100.dp)
        )

    }
}