How to Position Widgets Independently of Other Widgets in flutter? - 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

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

Answer 2

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'),
),
],
),
),
),
),