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

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.

Put your Column inside SingleChildScrollView refer my answer here and remove your Expanded widget above of thr Cliprect — Ravindra S. Patil
– Ravindra S. Patil, Commented Nov 11, 2022 at 9:04
Thank you but I just need it to be clipped not scrollable. There must be a way to clip a column. — Sami Al-Subhi
– Sami Al-Subhi, Commented Nov 11, 2022 at 10:40

Md. Yeasin Sheikh · Accepted Answer · 2022-11-11 09:10:06Z

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

Thank you. The height is a constraint that cannot be changed. Why would I make it smaller if it doesn’t serve any purpose and consequently it gives me this issue of overflow. There has to be a column there as in reality it contains other widgets stacked vertically.

Sami Al-Subhi · Accepted Answer · 2022-11-24 13:10:08Z

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

Anakhand · Accepted Answer · 2025-08-27 18:57:59Z

0

You can wrap the column in a SingleChildScrollView with physics: NeverScrollablePhysics().

answered Aug 27 at 18:57

Anakhand

3,1281 gold badge31 silver badges60 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related