Flutter OverflowBox is behind the next widget in a column

Question

I'm working on a Flutter project and I am trying to use the OverflowBox widget.

I have a list of widgets in a Column, one of them, in the middle is supposed to overflow the others based on some events by the user.

Here is a simplified version of my code.

The red Container needs to display the green Container that overflows it at the top and the bottom. But as you can see on the image, the green Container is only visible above the previous Container (the blue one) but not on the next one (the black Container). It looks like it is behind.

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 100,
          width: 100,
          color: Colors.blue,
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.red,
          child: Center(
            child: OverflowBox(
              maxHeight: 150,
              child: Container(
                color: Colors.green,
                height: 150,
                width: 50,
              ),
            ),
          ),
        ),
        Container(
          height: 100,
          width: 100,
          color: Colors.black,
        )
      ],
    );
  }
}

How can I get my green Container to be above the black one too ?

EDIT: For functionality purposes, I need the green Container to be a child/be created by the red Container (and not by the list where I could use a Stack widget). I need the logic to be inside the red and green ones.

user_13288003 · Answer

It still uses Stack, but Green Container is still part of Red Container.

And it might be difficult to calculate margin if Container has dynamic height.

class MyScreen extends StatelessWidget {
  const MyScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
          Container(
            margin: const EdgeInsets.only(top: 200),
            height: 100,
            width: 100,
            color: Colors.black,
          ),
          Container(
            margin: const EdgeInsets.only(top: 100),
            height: 100,
            width: 100,
            color: Colors.red,
            child: Center(
              child: OverflowBox(
                maxHeight: 150,
                child: Container(
                  height: 150,
                  width: 50,
                  color: Colors.green,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

user_6893709 · Answer

Use of overlay, maybe solve your problem.

OverlayState? overlayState = Overlay.of(context);

user_8068542 · Answer

I tried your code snipped and failed to getting the design that you particularly wishing to achieve.

I have anther way to get such type of design. Which ia using Stacl() widget

Here is an complete example code snippet


import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyScreen(),
        ),
      ),
    );
  }
}

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.blue,
            ),
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.red,
            ),
            Container(
              height: MediaQuery.of(context).size.height/3,
              width: MediaQuery.of(context).size.width,
              color: Colors.black,
            )
          ],
        ),
        Positioned(
          
          // to set a specific position of your widget use Positioned inside a Stack() widget
          
          /*
          bottom: 50,
          top: MediaQuery.of(context).size.height/3,
          left: 100,
          right: 100,
          */
          child: OverflowBox(
            child: Container(
              color: Colors.green,
              height: MediaQuery.of(context).size.height/2,
              width: 100,
            ),
          ),
        ),
      ],
    );
  }
}

Output:

Flutter OverflowBox is behind the next widget in a column

3 Answers