How to layer text over column widgets in 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

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

Answer 2

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.