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

Issue

How to use Stack and Positioned to add a shape in the SafeArea, I tried to change the color of the AppBar and connect to the shape and add mediaQuery, but still not on every screen it will be properly connected. So how to get a svg photo on the entire surface of SafeArea, and to make it responsive without using appbar, is it necessary to get the effect like in the picture below?(the code gives the effect as in the picture, but it is not responsive and consists of two parts, and I would like one part and get responsive)

Any help very much appreciated.

enter image description here
enter image description here

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

Solution

Use FitteBox Widget instead

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

Answered By – Aderoju Israel

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.