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: