CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-dependenciesflutter-animation
azeter09
azeter09

Reputation: 201

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

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

Upvotes: 0

Views: 66

Answers (1)

Aderoju Israel
Aderoju Israel

Reputation: 154

Use FitteBox Widget instead

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

Upvotes: 1

Related Questions