custom_animated_switcher

Custom Animated Switcher

A versatile Flutter widget that provides animated transitions between two widgets, offering a variety of customizable effects.

Features

Getting Started

To use this widget, add it to your project and import the necessary file:

  dependencies:
    flutter:
      sdk: flutter
    custom_animated_switcher: ^1.0.0

Usage

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomeScreen(),
    );
  }
}

class MyHomeScreen extends StatefulWidget {
  const MyHomeScreen({super.key});

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

class _MyHomePageState extends State<MyHomeScreen> {
  bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Custom Animated Switcher"),
      ),
      body: Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: CustomAnimatedSwitcher(
            showPrimary: _isLoading,
            animationType: AnimationType.clipReveal,
            animationCurve: Curves.fastOutSlowIn,
            animationDuration: const Duration(milliseconds: 500),
            primaryWidget: ListView.builder(
                itemCount: 20, itemBuilder: (_, index) => Text('Data: $index')),
            secondaryWidget: const CircularProgressIndicator(),
            clipper: const CircularRevealClipper(),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isLoading = !_isLoading;
          });
        },
        child: Icon(_isLoading ? Icons.visibility_off : Icons.visibility),
      ),
    );
  }
}

Parameters

The CustomAnimatedSwitcher accepts the following parameters:

Animation Types

The animationType parameter accepts the following values from the AnimationType enum, which determines the transition animation:

Customization

You can fine-tune the animation effects of the CustomAnimatedSwitcher using the following parameters:

By combining these customization options, you can create a wide range of transition effects.

Example Custom Clipper

To create a custom clipping effect you can create your own CustomClipper<Path>. Here’s an example of a rectangular clipper that you can use as a base for more complex effects.

class RectangularRevealClipper extends CustomClipper<Path> {
  const RectangularRevealClipper();
  @override
  Path getClip(Size size) {
    return Path()..addRect(Rect.fromLTWH(0, 0, size.width, size.height));
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

License

This project is licensed under the MIT License. See the LICENSE file for details.

Changelog

See the CHANGELOG.md file for a detailed history of changes.

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

This site is open source. Improve this page.