How to clip overflowing column widget contained by stack contained by column - flutter

Question

There are two main widgets:
I have this OverflowingWidget that is basically a Column - in reality this contains many widgets - However for this example, it has been given a height bigger than its parent widget.
The Parent widget ContainerWidget is basically AnimatedSwitcher which is basically a Stack contained by Column which constrained by a hight less than OverflowingWidget.
As you can see in dart-pad there is an overflow. The OverflowingWidget.
import 'package:flutter/material.dart';
const 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: ContainerWidget(),
),
),
);
}
}
class ContainerWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
height: 100,
width: 50,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: ClipRect(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: OverflowingWidget(),
layoutBuilder: (currentChild, previousChildren) => Stack(
children: [
...previousChildren,
if (currentChild != null) currentChild,
],
)),
),
),
],
));
}
}
class OverflowingWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [Container(color: Colors.blue, height: 150, width: 50)]);
}
}
Desired result:
I need the OverflowingWidget to be clean clipped without trying to resize the content inside. The same effect that can be obtained when in css:overflow:hidden.

Answer 1

AnimatedSwitcher is getting height 100, but it needs 150 for current widget. you can increase the height on redContainer.
Instead of using Column, you can use Stack widget.
class ContainerWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
height: 150,
width: 50,
child: Stack(
children: [
ClipRect(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: OverflowingWidget(),
layoutBuilder: (currentChild, previousChildren) => Stack(
children: [
...previousChildren,
if (currentChild != null) currentChild,
],
)),
),
],
));
}
}

Answer 2

I found a way to clip an overflowing column/row. Simply wrap that column/row with Wrap widget. That will do the clipping.
class OverflowingWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Wrap(children: [
Column(children: [
Container(
color: Colors.blue,
height: 150,
width: 50)
])
]);
}
}