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

Question

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

非常感谢任何帮助。

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 Widget

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

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

How to make the application responsive using Stack and Positoned - Flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation