Circular Reveal Animation as Flutter widget!

Overview

Circular Reveal Animation

pub package

Circular Reveal Animation as Flutter widget!

Inspired by Android's ViewAnimationUtils.createCircularReveal(...).

Статья с описанием (русский).

Article with description (english).

Demo web-site

Usage

CircularRevealAnimation(
  // @required
  child: Container(color: Colors.red),
  // @required [Animation<double>]
  animation: animation,
  // child's center if not specified
  centerAlignment: Alignment.centerRight,
  // 0 if not specified
  minRadius: 12,
  // distance from center to further child's corner if not specified
  maxRadius: 200,
);

Example

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CRA Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
    );
    animation = CurvedAnimation(
      parent: animationController,
      curve: Curves.easeIn,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CRA Demo"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              MaterialButton(
                child: Text("show reveal dialog"),
                onPressed: () => showRevealDialog(context),
                color: Colors.amber,
              ),
              SizedBox(height: 16),
              CircularRevealAnimation(
                child: Image.asset('assets/ocv.jpg'),
                animation: animation,
//                centerAlignment: Alignment.centerRight,
                centerOffset: Offset(130, 100),
//                minRadius: 12,
//                maxRadius: 200,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        if (animationController.status == AnimationStatus.forward ||
            animationController.status == AnimationStatus.completed) {
          animationController.reverse();
        } else {
          animationController.forward();
        }
      }),
    );
  }

  Future<void> showRevealDialog(BuildContext context) async {
    showGeneralDialog(
      barrierLabel: "Label",
      barrierDismissible: true,
      barrierColor: Colors.black.withOpacity(0.5),
      transitionDuration: Duration(milliseconds: 700),
      context: context,
      pageBuilder: (context, anim1, anim2) {
        return Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Image.asset('assets/klimt.png'),
            ),
            margin: EdgeInsets.only(top: 50, left: 12, right: 12, bottom: 0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5),
            ),
          ),
        );
      },
      transitionBuilder: (context, anim1, anim2, child) {
        return CircularRevealAnimation(
          child: child,
          animation: anim1,
          centerAlignment: Alignment.bottomCenter,
        );
      },
    );
  }
}
Comments
  • set start offset animation

    set start offset animation

    in this current library options i don't know how can i set optional start animation, for example when i click on floating action button begin of start animation is zero, how can i set for example Offset.zero to another offset?

    opened by pishguy 5
  • animation performance improvement

    animation performance improvement

    Doesn't pass child directly to builder method of AnimatedBuilder instead pass child to AnimatedBuilder and take it from argument of builder method. This improves performance as child is not rebuild on every frame.

    opened by shivamkj 3
  • Not working on Overlay

    Not working on Overlay

    import 'package:circular_reveal_animation/circular_reveal_animation.dart';
    import 'package:flutter/material.dart';
    
    class HiveTubeSliverAppBar extends StatefulWidget {
      final Function _onTap;
    
      const HiveTubeSliverAppBar({@required Function onTap}) : _onTap = onTap;
    
      @override
      _HiveTubeSliverAppBarState createState() => _HiveTubeSliverAppBarState();
    }
    
    class _HiveTubeSliverAppBarState extends State<HiveTubeSliverAppBar> with TickerProviderStateMixin {
      AnimationController _animationController;
      Animation<double> _animation;
    
      AnimationController _circularAnimationController;
      Animation<double> _circularAnimation;
    
      @override
      void initState() {
        super.initState();
    
        _animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 250));
        _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    
        _circularAnimationController = AnimationController(
          vsync: this,
          duration: const Duration(milliseconds: 1000),
        );
        _circularAnimation = CurvedAnimation(
          parent: _circularAnimationController,
          curve: Curves.easeIn,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return SliverPersistentHeader(
          pinned: false,
          floating: true,
          delegate: CustomAutoHideAppBarDelegate(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12.0),
              child: Row(
                children: <Widget>[
    
                  IconButton(icon: const Icon(Icons.more_vert_rounded), onPressed: () => _showOverlayHomeMenu(context, _animationController,_circularAnimation))
    
                ],
              ),
            ),
          ),
        );
      }
    
      Future<void> _showOverlayHomeMenu(BuildContext context, AnimationController animationController, Animation<double> circularAnimation) async {
        final OverlayState _overlayState = Overlay.of(context);
        final OverlayEntry _overlayEntry = OverlayEntry(builder: (context) {
          return CircularRevealAnimation(
            animation: circularAnimation,
            centerOffset: const Offset(10, 10),
            child: Positioned(
              top: kToolbarHeight - 20,
              right: 20.0,
              child: Opacity(
                  opacity: _animationController.value,
                  child: Card(
                    elevation: 8.0,
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
                    color: const Color(0xFF32313C),
                    child: Container(
                      width: 200.0,
                      height: 250.0,
                      child: const ListTile(
                        title: Text(
                          'aaaaaaa',
                          style: TextStyle(color: Colors.white),
                        ),
                        leading: Icon(
                          Icons.assessment,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
            ),
          );
        });
    
        _animationController.addListener(() {
          _overlayState.setState(() {});
        });
    
        _overlayState.insert(_overlayEntry);
        _animationController.forward();
        await Future.delayed(const Duration(milliseconds: 3500));
        _animationController.reverse();
    
        _overlayEntry.remove();
      }
    }
    
    opened by pishguy 3
  • Update LICENSE

    Update LICENSE

    Hi thank you for your awesome work! However I think you need to update the license to include the year and the author name. I need the copyright notice to be included in one of my repo here since I use one of your works in it.

    opened by iandis 1
  • use for flutter dialogs

    use for flutter dialogs

    how can i use this library for flutter dialogs?

    import 'package:circular_reveal_animation/circular_reveal_animation.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'CRA Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage>
        with SingleTickerProviderStateMixin {
      AnimationController animationController;
      Animation<double> animation;
    
      @override
      void initState() {
        super.initState();
        animationController = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 1000),
        );
        animation = CurvedAnimation(
          parent: animationController,
          curve: Curves.easeIn,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("CRA Demo"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: CircularRevealAnimation(
                child: FutureBuilder(
                  future: showDialog(),
                ),
                animation: animation,
                center: Offset(130, 100),
    //            minRadius: 12,
    //          maxRadius: 200,
              ),
            ),
          ),
          floatingActionButton: FloatingActionButton(onPressed: () {
            if (animationController.status == AnimationStatus.forward ||
                animationController.status == AnimationStatus.completed) {
              animationController.reverse();
            } else {
              animationController.forward();
            }
          }),
        );
      }
      Future<void> showDialog()async{
        bool _fromTop = false;
        showGeneralDialog(
          barrierLabel: "Label",
          barrierDismissible: true,
          barrierColor: Colors.black.withOpacity(0.5),
          transitionDuration: Duration(milliseconds: 700),
          context: context,
          pageBuilder: (context, anim1, anim2) {
            return Align(
              alignment: _fromTop ? Alignment.topCenter : Alignment.bottomCenter,
              child: Container(
                height: 300,
                child: SizedBox.expand(child: FlutterLogo()),
                margin: EdgeInsets.only(top: 50, left: 12, right: 12, bottom: 50),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(40),
                ),
              ),
            );
          },
          transitionBuilder: (context, anim1, anim2, child) {
            return SlideTransition(
              position: Tween(begin: Offset(0, _fromTop ? -1 : 1), end: Offset(0, 0)).animate(anim1),
              child: child,
            );
          },
        );
      }
    }
    
    
    opened by pishguy 1
  • Use slider or swipe gesture to control reveal animation

    Use slider or swipe gesture to control reveal animation

    Is it possible to attach the reveal to a controller so that if you swipe or pull a slider it reveals? Like slide to the right to reveal and then slide to the left and it closes back up. Slide half way and it reveals half. Thanks

    opened by jtkeyva 1
Owner
Alexander Zhdanov
Android/Flutter Developer
Alexander Zhdanov
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Bruno Jurković 314 Dec 31, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022
Flutter 3D Flip Animation Widget

flutter_flip_view This is a flutter Widget base on pure Dart code that provides 3D flip card visuals. Usage add package in your pubspec.yaml dependenc

WosLovesLife 57 Dec 30, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
A scrolling digital animation widget

animated_digit 一个上下滚动的数字动画 widget,凡是需要动画效果的数字,简单易用。 A scrolling digital animation widget that can be used to display the amount of animation, any numb

mingsnx 19 Nov 23, 2022
An implicit animation widget for rotation

AnimatedRotation An implicitly animated version of RotationTransition which automatically transitions the rotation over time when the provided angle c

Jason Rai 10 Jun 4, 2021
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 442 Dec 27, 2022
A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with ?? in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Shubham Soni 68 Sep 23, 2022
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 11 Jan 4, 2023
🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

??‍?? Staggered Animations made with algeria ❤

Hmida 17 Nov 22, 2022