flutter_animated_page_loader 0.1.1

A branded full-screen refresh overlay for Flutter. Animated coloured panels slide in to reveal a shimmering wordmark, with a guaranteed minimum visible duration so instant API responses still feel polished.

flutter_animated_page_loader

A branded full-screen refresh overlay for Flutter.

  

Two coloured panels slide in from the left and right edges, meet along a V-shaped boundary in the middle, and reveal a shimmering wordmark (with an optional tagline). When you flip isVisible back to false, the panels slide back out the way they came in.

A guaranteed minVisibleDuration ensures even instant API responses still show the full polished animation cycle.

Zero third-party dependencies. The shimmer effect is implemented with a plain ShaderMask, so adding the package only pulls in… the package.

Features

• Drop-in wrapper widget — just toggle a bool.
• Smooth, two-stage animation: panels slide in, then the wordmark fades in.
• Built-in shimmer effect (no shimmer package required).
• Customisable colours, text styles, durations, and shimmer period.
• Absorbs pointer events while visible so taps can't sneak through to your AppBar / back button mid-refresh.
• minVisibleDuration guarantees a polished feel on fast networks.

Install

Add to your pubspec.yaml:

dependencies:
  flutter_animated_page_loader: ^0.1.1

Then flutter pub get.

Usage

import 'package:flutter/material.dart';
import 'package:flutter_animated_page_loader/flutter_animated_page_loader.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isRefreshing = false;

  Future<void> _refresh() async {
    setState(() => _isRefreshing = true);
    await fetchFromApi(); // your async work
    if (mounted) setState(() => _isRefreshing = false);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedPageLoaderOverlay(
      isVisible: _isRefreshing,
      text: 'MYAPP',
      tagline: 'Fast. Simple. Yours.',
      child: Scaffold(
        appBar: AppBar(title: const Text('Home')),
        body: Center(
          child: ElevatedButton(
            onPressed: _refresh,
            child: const Text('Refresh'),
          ),
        ),
      ),
    );
  }
}

Customisation

All visuals live on AnimatedPageLoaderTheme:

AnimatedPageLoaderOverlay(
  isVisible: _isRefreshing,
  text: 'MYAPP',
  tagline: 'Pick smart. Deliver fast.',
  slideDuration: const Duration(milliseconds: 450),
  minVisibleDuration: const Duration(milliseconds: 1800),
  theme: const AnimatedPageLoaderTheme(
    panelColor: Color(0xFFFF6F00),
    shimmerHighlightColor: Colors.white,
    shimmerPeriod: Duration(milliseconds: 1400),
    textStyle: TextStyle(
      fontSize: 32,
      fontWeight: FontWeight.w800,
      color: Colors.white,
      letterSpacing: 6,
    ),
    taglineStyle: TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.w500,
      color: Colors.white,
      letterSpacing: 1.4,
    ),
  ),
  child: ...,
)

Parameter	Type	Default	Description
child	Widget	required	The screen the overlay is layered on top of.
isVisible	bool	required	Toggle to show / hide the overlay.
text	String	'LOADING'	Wordmark shown once the panels meet. Empty hides it.
tagline	String	''	Smaller line beneath the wordmark. Empty hides it.
slideDuration	Duration	450ms	How long the panels take to slide in (and out).
minVisibleDuration	Duration	1800ms	Minimum on-screen time after isVisible becomes true.
theme	AnimatedPageLoaderTheme	AnimatedPageLoaderTheme()	Colours, text styles, shimmer period.
absorbPointer	bool	true	Block taps to the underlying screen while visible.

How minVisibleDuration works

If your API responds in 200 ms but minVisibleDuration is 1800 ms, the overlay stays on screen for the full 1800 ms. This avoids the jarring "flash" of an animation that opens and immediately closes on fast networks.

If your API takes 5 seconds, the overlay closes as soon as you flip isVisible back to false — the minimum duration only ever extends the visible time, never shortens it.

Example

A complete runnable example lives in example/.

License

MIT