qwert2603 / circular_reveal_animation Goto Github PK
View Code? Open in Web Editor NEWCircular Reveal Animation as Flutter widget!
Home Page: https://pub.dev/packages/circular_reveal_animation
License: Apache License 2.0
Circular Reveal Animation as Flutter widget!
Home Page: https://pub.dev/packages/circular_reveal_animation
License: Apache License 2.0
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,
);
},
);
}
}
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.
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
Hi, how would it be possible to change the duration for example of the animation of closing the reveal? Thanks
how can i change Offset to animate from bottom center?
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();
}
}
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.