Allow Text Widget to Overflow Between Containers

Question

I've just started learning Flutter. I'm currently trying to get a Text widget to overflow between two containers that are inside a row.

Here's the code:

      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            color: Colors.green,
            width: 100.273,
            height: 150,
            child: const Text(
              "Test",
              overflow: TextOverflow.visible,
              style: TextStyle(
                color: Colors.black,
                decoration: TextDecoration.none,
              ),
            ),
          ),
          Container(
            color: Colors.white,
            width: 100,
            height: 150,
          ),
        ],
      ),

I've tried using different widgets, to foster the containers and tried different values for TextOverflow. Visible and Clip don't seem to do anything. Tried moving the Text widget up to the row and then making it clip trough both containers, but it didn't work too.

Here's the current layout, I want the "test" in the green Container to be able to clip into the white Container.

[]

Answer 1

If your intention is to create a text on top of 2 containers, you can try using Stack widget,

This is for the code:

Stack(
    children: [
      Row(
        children: [
          Container(
            color: Colors.green,
            width: 100.273,
            height: 150,
          ),
          Container(
            color: Colors.red,
            width: 100,
            height: 150,
          ),
        ],
      ),
      Text('Hallo, this is just test'),
    ],
  ),