将具有自定义形状的 Flutter 小部件完美地放置在另一个小部件中

Question

I would like to display the frame of a smartphone (SVG Image) and display any widgets in it that should not go beyond the frame of the smartphone.

In the image above I have the frame in a Stack and on top a ListView with Cards as child widget. The frame must be below the child widget for gestures to work. The ListView 's width is limited with a SizedBox with hardcoded width, but with that it's not responsive. On a slightly smaller screen, the ListView exceeds the frame (as you can see in the image). How can I make sure that the child widget always stays in the frame even if the screen size changes.

I also tried using ClipPath but I couldn't fit it perfectly into the frame. But I think ClipPath is needed because I want to place other child widgets in the frame eg Video that should cover all the space in the frame.

Answer 1

To make a widget responsive you can use MediaQuery.of(context).size.width which takes the width of your screen in pixels, if you multiply for example by 0.7 it will occupy 70% of your screen.

//square widget 1:1
SizedBox(
  child: SvgPicture.asset('lib/your.svg'),
  width: MediaQuery.of(context).size.width * 0.7,
  height: MediaQuery.of(context).size.width * 0.7,
),