How to layer text over column widgets in flutter? - flutter

Question

edit:
I made "I AM" bright neon green, but its mixing with the button colors to a dark green.
I want to display text over two buttons that cover the whole screen, 1 top half and 1 bottom half. I want text to display in the middle of the screen, kind of covering part of each button.
This is my code for the buttons:
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: poorText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: richText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
),
);}
I have tried to use stack, but it says too many positional arguments are being used. How would I keep my column layout and layer text over the buttons? If there is another way without column that still allows makes the buttons work that's fine too. Thanks!

Answer 1

You can use a Stack widget to achieve that:
Note. Because the two buttons are aligned to the center, you have to align the text widget also to the center so it can be placed directly ob=ver the two button.
Check the code below:
It works perfectly:
Widget build(BuildContext context) {
return Scaffold(
// use a stack widget
body: Stack(
children: [
// text to display over buttons
Align(
// set alignment to center to place it over the buttons
alignment: Alignment.center,
child: Text(
'Text you want to display over the buttons',
// give it your style
style: TextStyle(
),
),
),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: poorText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.black87,
child: richText,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
),
],
),
);}
I hope this helps.

Answer 2

Use 2 Columns widget within a Stack widget. The code below achieves exactly what you want if I understood you well.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
Container(
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: RaisedButton(
color: Colors.red,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdRoute()),
);
},
),
),
],
),
Column(
children: <Widget>[
Container(
// set alignment to center to place it over the buttons
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Text 1')),
),
Container(
// set alignment to center to place it over the buttons
height: (MediaQuery.of(context).size.height) / 2,
width: MediaQuery.of(context).size.width,
child: Center(child: Text('Text 2')),
),
],
)
],
);
}