animated_overflow

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

AnimatedOverflow is a Flutter widget that smoothly animates content overflow in horizontal or vertical directions, applying fade effects to reveal hidden parts. It enhances user experience by providing subtle transitions when text or widgets exceed their container bounds. Ideal for dynamic UIs where content expands or contracts, it supports multiple platforms including mobile, web, and desktop. The package is lightweight and easy to integrate, making it suitable for apps requiring elegant overflow animations without complex custom code.

Use cases

Dynamic text truncation with smooth reveal
Horizontal scrolling with fade effect
Vertical overflow animation for lists
Enhancing UI feedback on content expansion
Creating modern, responsive layouts
Animating list item overflow in carousels

Key features

Smooth fade-in/fade-out transitions
Supports horizontal and vertical overflow
Lightweight and minimal dependencies
Easy integration with existing widgets
Cross-platform compatibility
Configurable animation duration and curve

Suitable for

Developers seeking simple overflow animations
UI designers enhancing visual feedback
Apps with dynamic content containers
Projects requiring subtle motion effects
Flutter beginners exploring animation
Responsive app interfaces with expanding content

Considerations

Limited to basic fade and slide effects
Not ideal for complex animations
Requires careful sizing to avoid clipping
Best suited for small to medium overflow areas
May impact performance with many instances
Does not support custom animation curves beyond built-in options

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

A simple widget for animating overflowing content horizontally or vertically with fade.

Media | Description | How-to-Use

Media

Watch on Youtube:

v1.0.0

Description

This is a simple widget for animating overflowing content horizontally or vertically with fade.

How-to-Use

Simply create an AnimatedOverflow as shown in the example:

AnimatedOverflow({
    Key key,
    animatedOverflowDirection,
    child,
    maxHeight,
    maxWidth,
    padding : 0.0,
    speed   : 50})

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

The [animatedOverflowDirection] and [child] can't be null.
The [maxHeight] is only considered if [animatedOverflowDirection] is [AnimatedOverflowDirection.VERTICAL] and it should not be null.
The [maxWidth] is only considered if [animatedOverflowDirection] is [AnimatedOverflowDirection.HORIZONTAL] and it should not be null.

Notes

Any help, suggestion or criticism is appreciated!

Cheers.

Search packages, repositories and app categories