Flutter OverflowBox is behind the next widget in a column Flutter OverflowBox is behind the next widget in a column dart dart

Flutter OverflowBox is behind the next widget in a column


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


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:

Output of the code snippet