将 Flutter 小部件定位到屏幕外

Question

如标题所述，我正在尝试将我的小部件关闭屏幕 position。 目前我已经设法将小部件图像偏移到屏幕外，但这不是我预期的结果。 屏幕外的图像在状态栏上仍然可见。

这是它的样子

这就是我期望的样子（在 adobe XD 中设计）

Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      backgroundColor: Palette.primaryBackground,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Image.asset(
          'assets/Splash.png',
          fit: BoxFit.scaleDown,
          alignment: new Alignment(1.4, -1.2),
        ),
      ),
    ),
  );
}

我曾尝试在Stack中使用Positioned小部件，但是当我尝试将新小部件添加到Stack的子级时，它会导致更多溢出问题。

我确定有一种将小部件放置在绝对 position 中的正确方法。任何人都可以帮助我吗？

Answer 1

尝试使用转换：Matrix4.translationValues()并使用 MediaQueries 到 position。

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
      backgroundColor: Palette.primaryBackground,
        body: Container(
          child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.scaleDown,
//             alignment: new Alignment(1.4, -1.2),
          ),
          transform: Matrix4.translationValues(
              MediaQuery.of(context).size.width * .8, -50.0, 0.0),
        ),
      ),
    );
  }

Answer 2

您可以使用溢出可见的堆栈：

 Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    //using Positioned to control position
  ],
)

Answer 3

解决方案

我已经添加了高度为 200 的 sizedBox 以将文本向下推到屏幕中间以继续列的子项，如果不是所有列都从顶部开始的话。

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        color: Palette.primaryBackground,
        child: Stack(
          overflow: Overflow.clip,
          children: <Widget>[
            Positioned(
              top: -60,
              right: -80,
              child: Image.asset('assets/Splash.png'),
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  SizedBox(
                    height: 200,
                  ),
                  Text('hello'),
                ],
              ),
            )
          ],
        ),
      ),
    ),
  );
}