rive_animated_loaders 0.0.1

This package provides rive animated loaders that you can use in your projects.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rive Animated Loader',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.deepPurple)),
      home: const MyHomePage(title: 'Rive Animated Loader Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _goToPage(int delta) {
    final target = (_currentPage + delta).clamp(
      0,
      riveLoaderWidgets.length - 1,
    );
    _pageController.animateToPage(
      target,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    final isFirstPage = _currentPage == 0;
    final isLastPage = _currentPage == riveLoaderWidgets.length - 1;

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          widget.title,
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            onPageChanged: (page) => setState(() => _currentPage = page),
            children: riveLoaderWidgets
                .map((item) => DemoPage(title: item.title, loader: item.loader))
                .toList(),
          ),
          Positioned(
            left: 8,
            top: 0,
            bottom: 0,
            child: Center(
              child: IconButton(
                iconSize: 32,
                icon: const Icon(Icons.arrow_back_ios_new),
                onPressed: isFirstPage ? null : () => _goToPage(-1),
              ),
            ),
          ),
          Positioned(
            right: 8,
            top: 0,
            bottom: 0,
            child: Center(
              child: IconButton(
                iconSize: 32,
                icon: const Icon(Icons.arrow_forward_ios),
                onPressed: isLastPage ? null : () => _goToPage(1),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

List<RiveLoaderWidget> riveLoaderWidgets = [
  RiveLoaderWidget(
    title: "Jumping Squares",
    loader: RiveAnimatedLoader.jumpingSquares(),
  ),
  RiveLoaderWidget(
    title: "Moving Cubes",
    loader: RiveAnimatedLoader.movingCubes(),
  ),
  RiveLoaderWidget(
    title: "Twin Spheres",
    loader: RiveAnimatedLoader.twinSpheres(),
  ),
  RiveLoaderWidget(
    title: "Jumping Circles",
    loader: RiveAnimatedLoader.jumpingCircles(),
  ),
  RiveLoaderWidget(title: "Beep Wave", loader: RiveAnimatedLoader.beepWave()),
  RiveLoaderWidget(title: "Infinite", loader: RiveAnimatedLoader.infinite()),
  RiveLoaderWidget(
    title: "Falling Cube",
    loader: RiveAnimatedLoader.fallingCube(),
  ),
  RiveLoaderWidget(
    title: "Circle Spinner",
    loader: RiveAnimatedLoader.circleSpinner(),
  ),
  RiveLoaderWidget(title: "Long Wave", loader: RiveAnimatedLoader.longWave()),
  RiveLoaderWidget(
    title: "Jumping Dot",
    loader: RiveAnimatedLoader.jumpingDot(),
  ),
  RiveLoaderWidget(
    title: "Spinning Dot",
    loader: RiveAnimatedLoader.spinningDot(),
  ),
  RiveLoaderWidget(
    title: "Rotating Circles",
    loader: RiveAnimatedLoader.rotatingCircles(),
  ),
];

class RiveLoaderWidget {
  RiveLoaderWidget({required this.title, required this.loader});

  final String title;
  final Widget loader;
}

class DemoPage extends StatelessWidget {
  const DemoPage({required this.title, required this.loader, super.key});

  final String title;
  final Widget loader;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffFFDC4E),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            loader,
            const SizedBox(height: 16),
            Text(
              title,
              style: Theme.of(context).textTheme.titleLarge,
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}