Created
April 11, 2019 14:26
-
-
Save sanjeevbishnoi/27d8e9471d8031852fd9f86cb23bca39 to your computer and use it in GitHub Desktop.
bug fixes for flutter Blur widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| import 'package:frideos/frideos.dart'; | |
| import './custom/custom_blur_widget.dart'; | |
| import '../models/models.dart'; | |
| class CountdownWidget extends StatefulWidget { | |
| const CountdownWidget( | |
| {@required this.width, Key key, this.duration, this.triviaState}) | |
| : assert(width != null), | |
| super(key: key); | |
| final double width; | |
| final int duration; // Milliseconds | |
| final TriviaState triviaState; | |
| @override | |
| CountdownWidgetState createState() { | |
| return CountdownWidgetState(); | |
| } | |
| } | |
| class CountdownWidgetState extends State<CountdownWidget> | |
| with SingleTickerProviderStateMixin { | |
| Animation<double> animation; | |
| AnimationController controller; | |
| Color color; | |
| final double countdownBarHeight = 24.0; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| controller = AnimationController( | |
| duration: Duration(milliseconds: widget.duration), vsync: this); | |
| animation = Tween<double>(begin: widget.width, end: 0).animate(controller) | |
| ..addListener(() { | |
| setState(() { | |
| // Animate the countdown bar from green to red | |
| final value = (animation.value ~/ 2).toInt(); | |
| color = Color.fromRGBO(255 - value, value > 255 ? 255 : value, 0, 1); | |
| }); | |
| // Stop the animation if an anwser is chosen | |
| if (widget.triviaState.isAnswerChosen) { | |
| controller.stop(); | |
| } | |
| }); | |
| color = Colors.green; | |
| } | |
| @override | |
| void didUpdateWidget(CountdownWidget oldWidget) { | |
| super.didUpdateWidget(oldWidget); | |
| color = Colors.green; | |
| // If the user click on an anwser the countdown animation | |
| // will stop. | |
| if (widget.triviaState.isAnswerChosen) { | |
| controller.stop(); | |
| } | |
| // Otherwise, when a new question appears on the screen and | |
| // the widget rebuilds, then reset and play the countdown bar | |
| // animation. | |
| else { | |
| controller | |
| ..reset() | |
| ..forward(); | |
| } | |
| } | |
| @override | |
| void dispose() { | |
| controller.dispose(); | |
| super.dispose(); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Row( | |
| children: <Widget>[ | |
| Container( | |
| height: countdownBarHeight, | |
| width: animation.value, | |
| child: CustomBlurWidget( | |
| sigmaX: 12.0, | |
| sigmaY: 13.0, | |
| child: Container( | |
| color: color, | |
| ), | |
| ), | |
| ), | |
| ], | |
| ); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'dart:ui' as ui; | |
| import 'package:flutter/material.dart'; | |
| const double initialBlurVel = 0.1; | |
| const int blurRefreshTime = 20; | |
| /// | |
| /// Fixed Blur | |
| /// | |
| class CustomBlurWidget extends StatelessWidget { | |
| const CustomBlurWidget({ | |
| @required this.child, | |
| @required this.sigmaX, | |
| @required this.sigmaY, | |
| Key key, | |
| }) : assert(child != null, 'The child argument is null.'), | |
| assert(sigmaX != null, 'The sigmaX argument is null.'), | |
| assert(sigmaY != null, 'The sigmaY argument is null.'), | |
| super(key: key); | |
| /// | |
| /// Child to blur | |
| /// | |
| final Widget child; | |
| /// | |
| /// Vvalue of the sigmaX parameter of the blur | |
| /// | |
| final double sigmaX; | |
| /// | |
| /// Value of the sigmaY parameter of the blur | |
| /// | |
| final double sigmaY; | |
| @override | |
| Widget build(BuildContext context) { | |
| return LayoutBuilder( | |
| builder: (context, constraints) => Stack( | |
| children: <Widget>[ | |
| Container( | |
| height: constraints.maxHeight, | |
| width: constraints.maxWidth, | |
| child: child), | |
| ClipRect( | |
| child: BackdropFilter( | |
| filter: | |
| ui.ImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY), | |
| child: Container( | |
| height: constraints.maxHeight, | |
| width: constraints.maxWidth, | |
| color: Colors.transparent, | |
| ))), | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment