flutter - 如何制作响应式 svg -flutter

Question

获得响应式 svg 图像的最佳方法是什么，我考虑过使用 MediaQuery，但可能并不完全适合每个屏幕。

我使用了堆栈和定位，因为我有更多的东西要放在一个屏幕上，它们会重叠。

我想对此做出回应：

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

 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    leading: IconButton(
      icon: const Icon(Icons.arrow_back_ios, color: Colors.black),
      onPressed: () => Navigator.of(context).pop(),
    ),
  ),
  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,
          top: MediaQuery.of(context).size.width * 0.4,
          child: _curved(context),
        ),
      ]),
    ),
  ),
  );
// });
    }


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

标签： flutterdartflutter-layoutflutter-dependenciesdart-pub

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.yellow,
            child: Container(
                decoration: BoxDecoration(
                    color: Colors.green,
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(80.0),
                    ))),
          ),
        ),
        Flexible(
          child: Container(
            color: Colors.green,
            child: Container(
                decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(80.0),
                    ))),
          ),
        ),
      ]),
    );
  }
}