From f8e3d391f3bd52dd2de82be15e3d3e159ce3d7b7 Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Thu, 19 Mar 2020 05:19:18 +0530 Subject: [PATCH] Added more examples in animations (#341) --- animations/lib/main.dart | 11 ++- .../src/basics/09_animated_positioned.dart | 79 +++++++++++++++++++ .../lib/src/basics/10_animated_switcher.dart | 72 +++++++++++++++++ animations/lib/src/misc/animated_list.dart | 2 +- animations/pubspec.lock | 2 +- animations/test/widget_test.dart | 5 +- 6 files changed, 165 insertions(+), 6 deletions(-) create mode 100644 animations/lib/src/basics/09_animated_positioned.dart create mode 100644 animations/lib/src/basics/10_animated_switcher.dart diff --git a/animations/lib/main.dart b/animations/lib/main.dart index b6a4b8824..33c874f80 100644 --- a/animations/lib/main.dart +++ b/animations/lib/main.dart @@ -3,7 +3,6 @@ // found in the LICENSE file. import 'package:flutter/material.dart'; - import 'src/basics/01_animated_container.dart'; import 'src/basics/02_page_route_builder.dart'; import 'src/basics/03_animation_controller.dart'; @@ -12,6 +11,8 @@ import 'src/basics/05_animated_builder.dart'; import 'src/basics/06_custom_tween.dart'; import 'src/basics/07_tween_sequence.dart'; import 'src/basics/08_fade_transition.dart'; +import 'src/basics/09_animated_positioned.dart'; +import 'src/basics/10_animated_switcher.dart'; import 'src/misc/hero_animation.dart'; import 'src/misc/animated_list.dart'; import 'src/misc/card_swipe.dart'; @@ -64,6 +65,14 @@ final basicDemos = [ name: 'Fade Transition', route: FadeTransitionDemo.routeName, builder: (context) => FadeTransitionDemo()), + Demo( + name: 'AnimatedPositioned', + route: AnimatedPositionedDemo.routeName, + builder: (context) => AnimatedPositionedDemo()), + Demo( + name: 'AnimatedSwitcher', + route: AnimatedSwitcherDemo.routeName, + builder: (context) => AnimatedSwitcherDemo()) ]; final miscDemos = [ diff --git a/animations/lib/src/basics/09_animated_positioned.dart b/animations/lib/src/basics/09_animated_positioned.dart new file mode 100644 index 000000000..68fde935e --- /dev/null +++ b/animations/lib/src/basics/09_animated_positioned.dart @@ -0,0 +1,79 @@ +// Copyright 2020 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 'dart:math'; + +import 'package:flutter/material.dart'; + +class AnimatedPositionedDemo extends StatefulWidget { + static String routeName = '/basics/09_animated_positioned'; + + _AnimatedPositionedDemoState createState() => _AnimatedPositionedDemoState(); +} + +class _AnimatedPositionedDemoState extends State { + double topPosition; + double leftPosition; + + double generateTopPosition(double top) => Random().nextDouble() * top; + + double generateLeftPosition(double left) => Random().nextDouble() * left; + + void initState() { + super.initState(); + topPosition = generateTopPosition(30); + leftPosition = generateLeftPosition(30); + } + + void changePosition(double top, double left) { + setState(() { + topPosition = generateTopPosition(top); + leftPosition = generateLeftPosition(left); + }); + } + + Widget build(BuildContext context) { + final size = MediaQuery.of(context).size; + final appBar = AppBar(); + final topPadding = MediaQuery.of(context).padding.top; + // AnimatedPositioned animates changes to a widget's position within a Stack + return SafeArea( + child: Scaffold( + appBar: appBar, + body: Container( + height: size.height, + width: size.width, + child: Stack( + children: [ + AnimatedPositioned( + top: topPosition, + left: leftPosition, + duration: Duration(seconds: 1), + child: InkWell( + onTap: () => changePosition( + size.height - + (appBar.preferredSize.height + topPadding + 50), + size.width - 150), + child: Container( + alignment: Alignment.center, + width: 150, + height: 50, + child: Text( + "Click Me", + style: TextStyle( + color: + Theme.of(context).buttonTheme.colorScheme.onPrimary, + ), + ), + color: Theme.of(context).primaryColor, + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/animations/lib/src/basics/10_animated_switcher.dart b/animations/lib/src/basics/10_animated_switcher.dart new file mode 100644 index 000000000..41478f1ff --- /dev/null +++ b/animations/lib/src/basics/10_animated_switcher.dart @@ -0,0 +1,72 @@ +// Copyright 2020 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 'dart:math'; + +import 'package:flutter/material.dart'; + +Color generateColor() => Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF)); + +Widget generateContainer(int keyCount) => Container( + key: ValueKey(keyCount), + height: Random().nextDouble() * 200, + width: Random().nextDouble() * 200, + decoration: BoxDecoration( + color: generateColor(), + borderRadius: BorderRadius.circular(Random().nextDouble() * 100), + border: Border.all( + color: generateColor(), + width: Random().nextDouble() * 5, + ), + ), + ); + +class AnimatedSwitcherDemo extends StatefulWidget { + static String routeName = '/basics/10_animated_switcher'; + + _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState(); +} + +class _AnimatedSwitcherDemoState extends State { + Widget container; + int keyCount; + + void initState() { + super.initState(); + keyCount = 0; + container = generateContainer(keyCount); + } + + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + actions: [ + MaterialButton( + onPressed: () => setState( + () => container = generateContainer(++keyCount), + ), + child: Text( + "Change Widget", + style: TextStyle( + color: Theme.of(context).buttonTheme.colorScheme.onPrimary), + ), + ), + ], + ), + body: Center( + // AnimatedSwitcher Widget is used to switch between different widgets + // with a given transition. You can change the transitions by using + // transitionBuilder property. + child: AnimatedSwitcher( + duration: Duration(seconds: 1), + child: container, + transitionBuilder: (child, animation) => ScaleTransition( + child: child, + scale: animation, + ), + ), + ), + ); + } +} diff --git a/animations/lib/src/misc/animated_list.dart b/animations/lib/src/misc/animated_list.dart index ad3852961..6cb712506 100644 --- a/animations/lib/src/misc/animated_list.dart +++ b/animations/lib/src/misc/animated_list.dart @@ -6,7 +6,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class AnimatedListDemo extends StatefulWidget { - static String routeName = '/basics/08_animated_list'; + static String routeName = '/misc/animated_list'; _AnimatedListDemoState createState() => _AnimatedListDemoState(); } diff --git a/animations/pubspec.lock b/animations/pubspec.lock index 9a0f87f64..9879eac2a 100644 --- a/animations/pubspec.lock +++ b/animations/pubspec.lock @@ -169,7 +169,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.2.11" + version: "0.2.15" typed_data: dependency: transitive description: diff --git a/animations/test/widget_test.dart b/animations/test/widget_test.dart index d43850b03..60fbd38d4 100644 --- a/animations/test/widget_test.dart +++ b/animations/test/widget_test.dart @@ -5,12 +5,11 @@ // gestures. You can also use WidgetTester to find child widgets in the widget // tree, read text, and verify that the values of widget properties are correct. -import 'package:flutter_test/flutter_test.dart'; - import 'package:animations/main.dart'; +import 'package:flutter_test/flutter_test.dart'; void main() { - testWidgets('Counter increments smoke test', (tester) async { + testWidgets('smoke test', (tester) async { // Build our app and trigger a frame. await tester.pumpWidget(AnimationSamples());