[animations] Added FadeTransition Demo (#375)

* [animations] Added FadeTransition Demo

* updated acc to reviews

* updated acc to reviews

Co-authored-by: John Ryan <ryjohn@google.com>
pull/386/head
Jaideep Prasad 5 years ago committed by GitHub
parent b1a4a24f64
commit 73ee9832a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -23,6 +23,7 @@ Building blocks and patterns
6. **CustomTweenDemo** Demonstrates how to extend `Tween`. 6. **CustomTweenDemo** Demonstrates how to extend `Tween`.
7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a
button that changes between different colors. button that changes between different colors.
8. **FadeTransitionDemo** Demonstrates how to use `FadeTransition`.
### Misc ### Misc

@ -11,6 +11,7 @@ import 'src/basics/04_tweens.dart';
import 'src/basics/05_animated_builder.dart'; import 'src/basics/05_animated_builder.dart';
import 'src/basics/06_custom_tween.dart'; import 'src/basics/06_custom_tween.dart';
import 'src/basics/07_tween_sequence.dart'; import 'src/basics/07_tween_sequence.dart';
import 'src/basics/08_fade_transition.dart';
import 'src/misc/hero_animation.dart'; import 'src/misc/hero_animation.dart';
import 'src/misc/animated_list.dart'; import 'src/misc/animated_list.dart';
import 'src/misc/card_swipe.dart'; import 'src/misc/card_swipe.dart';
@ -59,6 +60,10 @@ final basicDemos = [
name: 'Tween Sequences', name: 'Tween Sequences',
route: TweenSequenceDemo.routeName, route: TweenSequenceDemo.routeName,
builder: (context) => TweenSequenceDemo()), builder: (context) => TweenSequenceDemo()),
Demo(
name: 'Fade Transition',
route: FadeTransitionDemo.routeName,
builder: (context) => FadeTransitionDemo()),
]; ];
final miscDemos = [ final miscDemos = [

@ -0,0 +1,76 @@
// Copyright 2019 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
// Refer to the AnimatedWidget docs here - https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html
// for examples of other common animated widgets.
class FadeTransitionDemo extends StatefulWidget {
static const String routeName = '/basics/fade_transition';
@override
_FadeTransitionDemoState createState() => _FadeTransitionDemoState();
}
class _FadeTransitionDemoState extends State<FadeTransitionDemo>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
CurvedAnimation _curve;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
);
_curve = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
_animation = Tween(
begin: 1.0,
end: 0.0,
).animate(_curve);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Animated Widget',
),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FadeTransition(
opacity: _animation,
child: Icon(
Icons.star,
color: Colors.amber,
size: 300,
),
),
RaisedButton(
child: Text('animate'),
onPressed: () => setState(() {
_controller.animateTo(1.0).then<TickerFuture>(
(value) => _controller.animateBack(0.0));
}),
),
],
),
),
);
}
}
Loading…
Cancel
Save