Flutter use an image as frame to cover a picture

Question

I want to put an iPhone's frame image above the picture. The picture's size is bigger than the frame. I want to clip the extended edge of the picture to make it not exceed the frame.

my code is below, it works on iPhone 11 after adjustment. But it's broken on other devices with different size. Actually the code doesn't clip the picture, it just resize the frame to fit the size of frame. It's not good, i just wan to cut the extend part of the picture, it would be better.

Could anyone help me to work this overlay effect out? thanks!

Widget build(BuildContext context) {
return Container(
    color: Colors.transparent,
    width: 400,
    height: 600,
    clipBehavior:  Clip.hardEdge,
    child: ClipRect(
        clipBehavior: Clip.hardEdge,
        child: Stack(
            children: <Widget>[
                Padding(
                    padding: const EdgeInsets.only(left: 67.5,right: 67,top: 9,bottom: 9),
                    child: Column(
                        children: <Widget>[
                            Expanded(child: Image(image:AssetImage("Object.png"))),
                        ],
                    ),
                ),
                Container(
                    child: Center(
                        child: Image(
                            image: AssetImage("Frame.png")),
                    ),
                ),
            ],
        ),
    ),
);

}

Answer 1

You can fit the image with BoxFit.fitHeight then use ClipRRect to clip the corners.

Output:

Code:

import 'package:flutter/material.dart';

main() => runApp(MyApp());

final String url =
    "https://media.idownloadblog.com/wp-content/uploads/2018/09/iPhone-XS-advertising-wallpaper-any-iPhone-2-768x1365.png";

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
       home: MaterialApp(
        home: HomeScreen(),
      ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 500,
        width: 250,
        child: Stack(
          children: <Widget>[
            SizedBox(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(25)),
                child: Image.network(
                  url,
                  fit: BoxFit.fitHeight,
                ),
              ),
              height: 500,
              width: 250,
            ),
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(25)),
                  border: Border.all(width: 4, color: Colors.blue),
                  shape: BoxShape.rectangle),
            ),
          ],
        ),
      ),
    );
  }
}