Флаттер использует изображение в качестве рамки, чтобы покрыть картину

Question

Я хочу поместить рамку iPhone над картинкой. Размер картинки больше рамки. Я хочу обрезать расширенный край изображения, чтобы он не превышал рамки.

Мой код ниже, он работает на iPhone 11 после регулировки. Но это сломано на других устройствах с другим размером. На самом деле код не обрезает картинку, он просто изменяет размер кадра, чтобы соответствовать размеру кадра. Это нехорошо, я просто хочу вырезать расширенную часть изображения, было бы лучше.

Может ли кто-нибудь помочь мне выработать этот эффект наложения? спасибо!

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

Вы можете уместить изображение с помощью BoxFit.fitHeight, затем использовать ClipRRect для обрезки углов.

Вывод:

Код:

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),
            ),
          ],
        ),
      ),
    );
  }
}