How to Position Widgets Independently of Other Widgets in flutter?

Question

I was Trying to Have 3 Widgets in Single page using Column, but for some reason the alignment is not working...

@override
  Widget build(BuildContext context) {

    return Container(
      height: double.infinity,
      child: SwipeDetector(
        onSwipeUp: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreditScreen()));
        },

        onSwipeDown: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ManualScreen()));
        },
        
        child: Scaffold(
          backgroundColor: DarkBlue,
          resizeToAvoidBottomInset: false,
          body: new Container(
            height: double.infinity,
            alignment: Alignment.center,
            child: Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Align(
                  alignment: Alignment.topCenter,
                  child: Image.asset('assets/swipe_down.gif',
                    scale: 5,
                  ),
                ),

                new Align(
                  alignment: Alignment.center,
                  child: Text("Menu Screen",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                    //textAlign: TextAlign.center,
                  ),
                ),

                new Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.asset('assets/swipe_up.gif',
                    scale: 5,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

According to the above image, I want the swipe up widget at bottom and swipe down at the top while the text in center, I Tried Many wrapping of Widgets, but nothing seems to work... Any Help...

Answer 1

You can use Center widget for aligning widgets in center along with padding widget for giving spaces between the widgets.

 Scaffold(
      backgroundColor: Colors.black,
      resizeToAvoidBottomInset: false,

      body: new Container(
        height: double.infinity,
        alignment: Alignment.center,

      child:
        Center(
           child: Column(
                   children: <Widget>[
                           Padding(
                              padding: EdgeInsets.only(top:30),
                              child: Image.asset('assets/swipe_down.gif'),
                              ),


            Padding(
              padding: EdgeInsets.only(top:80),
              child: 
                   Text("Menu Screen",
                          style: TextStyle(
                          color: Colors.white,
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold 
                      ),
                ),
            ),


        Padding(
          padding: EdgeInsets.only(top:80),
          child: Image.asset('assets/swipe_up.gif'),
            ),

          ],
        ),
      ),
     ),
   ),

Answer 2

try this:

Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Image.asset('assets/swipe_down.gif',
                    scale: 5,
                  ),

               Expanded(
                  child: Text("Menu Screen",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                    //textAlign: TextAlign.center,
                  ),
                ),

                Image.asset('assets/swipe_up.gif',
                    scale: 5,
                  ),
                
              ],
            ),