title: Align center of an image to the bottom of another image in flutter
body: <p>Currently I'm facing a problem for creating responsive design in flutter so it could work fine with the same look and feel to <strong>all screen sizes</strong></p>
  
  <p>Currently I need to create like the image below, I need the center of an image (the red one in the image below) to be aligned to the bottom of another one (the blue big image) , sometimes the red one is centered but in different screen sizes its either raised a little bit to the top or to the bottom.</p>
  
  <p><a href="https://i.stack.imgur.com/0H2dq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0H2dq.png" alt="enter image description here"></a></p>
  
  <p>This is my attempt:</p>
  
  <pre><code>class ImageAssetUtils 
  {
      static Image drawImage(String imagePath, double requiredWidth, double requiredHeight) 
      {
          double screenFactor = 1.0;
          screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.8 : screenFactor;
          screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.21 : screenFactor;
          requiredWidth = requiredWidth * screenFactor;
          requiredHeight = requiredHeight * screenFactor;
          return new Image.asset(imagePath, width: requiredWidth, height: requiredHeight);
      }
  }
  
  class StyleUtils 
  {
      static EdgeInsets givePadding(EdgeInsets absoluteEdges)
      {
          double screenFactor = 1.0;
          screenFactor = ScreenSize.isSmallScreenSize(myApp.navigatorState.currentContext) ? 0.75 : screenFactor;
          screenFactor = ScreenSize.isLargeScreenSize(myApp.navigatorState.currentContext) ? 1.14 : screenFactor;
  
          double left = absoluteEdges.left * screenFactor;
          double right = absoluteEdges.right * screenFactor;
          double top = absoluteEdges.top * screenFactor;
          double bottom = absoluteEdges.bottom * screenFactor;
  
          return EdgeInsets.only(left: left, right: right, top: top, bottom: bottom);
      }
  }  
  
  class Test extends StatefulWidget 
  {
      @override
      _TestState createState() =&gt; _TestState();
  }
  
  class _TestState extends State&lt;Test&gt; 
  {
      @override
      Widget build(BuildContext context)
      {
          return new Scaffold(
              backgroundColor: Color.fromRGBO(235, 235, 235, 1.0),
              body: new Stack(children: &lt;Widget&gt;[
                  new Image.asset('some Image.png',
                      fit: BoxFit.fill,
                      width: MediaQuery.of(context).size.width,
                      height: MediaQuery.of(context).size.height * 0.33
                  ),
                  ListView(children: &lt;Widget&gt;[
                      new Padding(
                          padding: StyleUtils.givePadding(EdgeInsets.only(top: 16.0)),
                          child: new Center(
                              child: new Container(
                                  child: ImageAssetUtils.drawImage("my image.png", 100.0, 100.0),
                              ),
                          )
                       )
                  ]),
              ])
          );
      }
  }
  </code></pre>
  
  <p>If any help is it will be much appreciated, thanks in advance.</p>