如何使用 Stack 和 Positioned 使应用程序响应式 - Flutter

Question

如何使用Stack和Positioned在SafeArea中添加形状，我尝试改变AppBar的颜色并连接到形状并添加 mediaQuery，但仍然不是在每个屏幕上都会正确连接。那么如何在SafeArea的整个表面上得到一张svg照片，并且在不使用appbar的情况下使其响应式，是不是需要得到下图这样的效果呢？ （代码给出的效果如图，但它不是响应式的，由两部分组成，我想要一个部分并响应）

非常感谢任何帮助。

class Shape extends StatelessWidget {
static Route route() {
return MaterialPageRoute<void>(builder: (_) => Shape());
}

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue,
    elevation: 0,
    actions: [],
  ),
  body: _profilePage(context),
);
}

Widget _profilePage(BuildContext context) {
return SafeArea(
  child: Align(
    child: Center(
      child: Stack(
        children: <Widget>[
          Positioned(
            width: MediaQuery.of(context).size.width * 1,
            height: MediaQuery.of(context).size.height,
            bottom: MediaQuery.of(context).size.width * 0.6,
            child: _curved(context),
          ),
        ],
      ),
    ),
  ),
);
}

Widget _curved(BuildContext context) {
return SvgPicture.asset(
  'assets/images/shape_purple.svg',
  color:  Colors.blue,
  allowDrawingOutsideViewBox: true,
);
}

Answer 1

改用 FitteBox 小部件

FittedBox(
            child: Image.asset('assets/images/background.png'),
            fit: BoxFit.fill,
            // decoration: BoxDecoration(
            //     color: Colors.white),
          ),