insert 2 images together - flutter

Question

I am trying to make this design from figma ui design and need to make the 2 pic inside each other but when i do it there is a space between them also the shaded part in the right pic how can i make it
but it did not work so It comes in this shape
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Row(
children: [
Expanded(
child: Container(
width: 235,
height: 235,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/back1.png',
),
fit: BoxFit.cover,
),
),
),
),
Expanded(
child: Container(
width: 279,
height: 279,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/back1.png',
),
fit: BoxFit.cover,
),
),
),
),
],
),
],
),
);
}
}
So what widget or things to add to make the 2 pic mixed

Answer 1

Use Stack and Positioned ,try this:
Stack(
children: [
Positioned(
top: 0,
right: 0,
child: Image.asset(
'assets/images/back1.png',
fit: BoxFit.cover,
width: 235,
height: 235,
),
),
Positioned(
top: 0,
left: 0,
child: Image.asset(
'assets/images/back1.png',
fit: BoxFit.cover,
width: 279,
height: 279,
),
),
],
),

Answer 2

use Row Widget and size the first image to have half screen using MediaQuery
then wrap the Row it's self to stack and add other one over the stack and position it wherever you want !

Answer 3

I think the best way is to export the two images together in Figma, forming a single image. You can do this by selecting both images > Group > Export. So you don't need almost any code to put them together. I know that's not the point, but it's a creative and valid solution for your case. I hope it helps.