如何制作响应式 svg -flutter

Posted 2023-02-23

【中文标题】如何制作响应式 svg -flutter

【英文标题】：How to make responsive svg -flutter

【发布时间】：2021-10-04 21:41:24

【问题描述】：

获得响应式 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,
);

【问题讨论】：

你搜索过问题吗？你发现了什么？

我想添加这个：pub.dev/packages/sizer 或 api.flutter.dev/flutter/widgets/CustomPaint-class.html

在问题中添加对研究及其结果的描述是个好主意。

【参考方案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),
                    ))),
          ),
        ),
      ]),
    );