Search packages, repositories and app categories

Package detailsv2.0.0

flutter_fadein

Simple Flutter widget to fade-in your widgets once they are mounted.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
17.2K
Likes
56
Pub points
140

Install package

flutter pub add flutter_fadein

Package Overview

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

A simple Flutter widget that smoothly fades in content once it is mounted to the widget tree. Ideal for enhancing user experience with subtle entrance animations without complex setup. The widget automatically handles the fade-in transition, making it easy to apply across various UI elements. It supports all major platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior across devices. Perfect for onboarding screens, dynamic lists, or any component that benefits from a gentle appearance effect.

Use cases

  • Onboarding screens
  • Dynamic list item animations
  • Loading state transitions
  • Splash screen exits
  • Page transitions

Key features

  • Automatic fade-in on mount
  • Minimal configuration
  • Cross-platform support
  • Smooth animation
  • Lightweight implementation

Suitable for

  • Beginner Flutter developers
  • Simple UI enhancements
  • Performance-sensitive apps
  • Apps with frequent content updates

Considerations

  • Not suitable for complex animations
  • Limited customization options
  • Does not support reverse animation
  • Best for single-element fades

Original README

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

Flutter Fade-In pub package

Simple Flutter widget to fade-in your widgets once they are mounted.

Supports Material & Cupertino widgets.

Required Dart >=2.12 (has null-safety support).

Pub - API Docs - GitHub

Install

Add this as a dependency in your pubspec.yaml:

dependencies:
  flutter_fadein: ^2.0.0

Usage

import 'package:flutter_fadein/flutter_fadein.dart';

FadeIn(
  child: Text("This will be faded-in!"),
  // Optional paramaters
  duration: Duration(milliseconds: 250),
  delay: Duration(milliseconds: 250)
  curve: Curves.easeIn,
)
With Controller

If you need more control over the animation timing, you can use FadeInController:

final controller = FadeInController();

// ...

FadeIn(
  child: Text("This will be faded-in with a controller"),
  controller: controller,
)

// ...

controller.fadeIn();
controller.fadeOut();

Using a controller with not automatically start. You can make it automatically start using FadeInController(autoStart: true). Note that the delay parameter does not work while using a controller, and will therefore raise an exception.

Categories

Source repository

Projects using this package