How to make responsive svg -flutter

Question

What is the best way to get a responsive svg image, I thought about using MediaQuery, but probably not quite it will fit for every screen.

I used Stack and Positioned because I have more things to lay on one screen that will overlap.

I want to make responsive this:

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,
);}

Solution

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),
                    ))),
          ),
        ),
      ]),
    );
  }
}

Comments

[Trilarion]

Have you searched for the problem? What did you find?

[azeter09]

I was thinking to add this: pub.dev/packages/sizer or api.flutter.dev/flutter/widgets/CustomPaint-class.html

[Trilarion]

It's a good idea to add a description of the research and the results of it to the question.