-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Question]: Animation for showing/hiding a dialog #25
Comments
@DevTello, hello. Do you mean setting up custom animation? |
Well, I need to set a Duration of showing and fading of a dialog, I managed to set up only |
Each dialog has a property named final content = Container(
height: 150.0,
color: Colors.blue[900],
alignment: Alignment.center,
child: Text(
_selectedPosition.name,
style: const TextStyle(
color: Colors.white,
fontSize: 30.0,
),
),
);
content
.positioned(
animationConfiguration:
const EasyDialogAnimationConfiguration.bounded(
duration: Duration(seconds: 1),
reverseDuration: Duration(milliseconds: 500),
),
autoHideDuration: _isAutoHide
? Duration(milliseconds: _autoHideDuration.toInt())
: null,
)
.fade()
.show(); To be able to configure durations independently you could create your own custom Something like that: final class IndependentFade<D extends EasyDialog> extends EasyDialogAnimation<D> {
late final AnimationController _animationController;
final Duration duration;
final Duration reverseDuration;
final TickerProvider vsync;
IndependentFade({
required this.duration,
required this.reverseDuration,
required this.vsync,
});
@override
void init() {
_animationController = AnimationController(
duration: duration,
reverseDuration: reverseDuration,
vsync: vsync,
);
}
@override
void onShow() {
super.onShow();
_animationController.forward();
}
@override
void onHide() {
_animationController.reverse();
super.onHide();
}
@override
Widget call(D dialog) {
return FadeTransition(
opacity: CurvedAnimation(
parent: _animationController,
curve: curve,
),
child: dialog.content,
);
}
} For now it is required to explicitly pass |
|
Could you provide sample code? |
Sorry for the delay, I'm overloaded a bit. Will do as soon as I can) |
Here you go. Subjectively these 2 sec are perceived as 1. Using Android 10 import 'package:flutter/material.dart';
import 'package:flutter_easy_dialogs/flutter_easy_dialogs.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(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
builder: FlutterEasyDialogs.builder(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
EasyDialog? _dialog;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),
),
body: Center(
child: MaterialButton(onPressed: showDialog, child: Text('Show')),
));
}
Future<void> showDialog() async {
_dialog?.hide();
_dialog = FullScreenDialog(
animationConfiguration: const EasyDialogAnimationConfiguration.bounded(
//plays 2x faster than reverseDuration for some reason
duration: Duration(milliseconds: 2000),
reverseDuration: Duration(milliseconds: 1000),
),
decoration: const EasyDialogAnimation.fade(),
content: Scaffold(
body: SafeArea(
child: Placeholder(child: Center(child: MaterialButton(onPressed: hideDialog, child: Text('Hide')))),
),
),
)..show();
}
void hideDialog() {
_dialog?.hide();
_dialog = null;
}
}
|
Here is the link to the playground: https://flutlab.io/editor/bdca479b-172a-4311-81ef-fd0efc871343 |
Thanks. I will take a close look as soon as possible. |
Try to provide The default curve is adding described "slow" behaviour. |
thanks, it helped, but not quite obvious) |
Probably I should set all curves as |
What is your question?
How do I set up an animation for showing/hiding a dialog?
Code of Conduct
The text was updated successfully, but these errors were encountered: