Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
paperfold cover
Package detailsv1.0.4

paperfold

This package provides a widget which applies a paper fold effect on it's child.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
21
Likes
34
Pub points
150

Install package

flutter pub add paperfold

Package Overview

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

Paperfold is a Flutter package that enables developers to apply realistic paper fold effects to any widget child. It simulates the visual appearance of folded paper through smooth animations, enhancing user interfaces with dynamic, tactile interactions. Ideal for creating interactive cards, document previews, or engaging UI transitions, it works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux. The package is lightweight and integrates seamlessly into existing Flutter projects using a simple add command.

Use cases

  • Interactive card animations
  • Document preview interfaces
  • Dynamic UI transitions
  • App onboarding screens
  • Creative dashboard elements
  • Gesture-driven fold effects

Key features

  • Realistic paper folding animation
  • Cross-platform compatibility
  • Simple integration via pub
  • Customizable fold angles
  • Smooth performance on all devices
  • Supports nested widgets

Suitable for

  • UI designers seeking visual flair
  • Developers building interactive apps
  • Projects requiring tactile feedback
  • Educational or presentation apps
  • Apps with document or card-based layouts

Considerations

  • May impact performance on low-end devices
  • Limited to fold-style transformations
  • Not suitable for complex 3D scenes
  • Requires careful layout planning
  • Animation may need tuning for different screen sizes
  • Best used sparingly to avoid visual clutter

Original README

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

Paperfold

Pub Style Style Style

This package provides a widget which applies a paper fold effect on it's child. You can choose between horizontal and vertical fold direction. The number of strips has to be at least two.

preview

Getting started

Installation

Add paperfold as a dependency in your pubspec.yaml file. Or run pub add paperfold in your terminal.

Usage

Just add the widget to your tree and you're done :). Take a look at example to see more.

PaperFold(
  mainAxis: PaperFoldMainAxis.vertical,
  strips: 4,
  foldValue: .5,
  pixelRatio: 1,//works best if you query the device pixel ration with MediaQuery.of
  child: ClipRRect(
    borderRadius: BorderRadius.all(Radius.circular(20)),
    child: Container(
      color: Colors.green,
      height: 150,
      child: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) {
          return Column(
            children: [
              Row(
                children: const [
                  Icon(
                    Icons.translate,
                    size: 50,
                  ),
                  Text("hello world, hello world")
                ],
              ),
            ],
          );
        },
      ),
    ),
  ),
);

Limitation

  • User interactions (gestures etc.) with child only possible in unfold state. (0 <= fold value < 1)
  • Child widgets can't be animated. This is also valid for videos. You can wrap it by the paperfold, but the content will not update in folded state.

Issues

Feel free to file any issues, bugs, or feature requests. All contributions are welcome :)

License

BSD-3-Clause

Special thx

Special thanks to GwaedGlas for reviewing and sparring this package

Categories

Animation & Transition

Dependencies

Dependency list 1 items

Source repository

Projects using this package

No data available yet.