Add animation samples (#118)

* initialize animations sample project * add two demos, set up routing * clean up expand_card demo * update README * clean up expand_card demo * dartfmt * update comment * address code review comments * swap AnimatedContainer and AnimatedCrossFade * use AnimatedSwitcher instead of AnimatedCrossFade * Revert "use AnimatedSwitcher instead of AnimatedCrossFade" This reverts commit e112e02549. * rename expanded -> selected * use Dart 2.4.0 constraint * update README * address code review comments update images add curves to expand_card update pubspec.lock * add @override annotation * add animations project to travis script * add empty test for travis * add copyright notice to animations/ project
2025-11-09 06:18:49 +00:00 · 2019-07-23 15:51:57 -07:00
parent 086a77b1b8
commit 2d42fcfd31
66 changed files with 1650 additions and 0 deletions
--- a/animations/lib/src/misc/expand_card.dart
+++ b/animations/lib/src/misc/expand_card.dart
@@ -0,0 +1,89 @@
+// 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';
+
+class ExpandCardDemo extends StatelessWidget {
+  static const String routeName = '/expand_card';
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(),
+      body: Center(
+        child: ExpandCard(),
+      ),
+    );
+  }
+}
+
+class ExpandCard extends StatefulWidget {
+  _ExpandCardState createState() => _ExpandCardState();
+}
+
+class _ExpandCardState extends State<ExpandCard>
+    with SingleTickerProviderStateMixin {
+  static const Duration duration = Duration(milliseconds: 300);
+  bool selected = false;
+
+  double get size => selected ? 256 : 128;
+
+  void toggleExpanded() {
+    setState(() {
+      selected = !selected;
+    });
+  }
+
+  @override
+  Widget build(context) {
+    return GestureDetector(
+      onTap: () => toggleExpanded(),
+      child: Card(
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: AnimatedContainer(
+            duration: duration,
+            width: size,
+            height: size,
+            curve: Curves.ease,
+            child: AnimatedCrossFade(
+              duration: duration,
+              firstCurve: Curves.easeInOutCubic,
+              secondCurve: Curves.easeInOutCubic,
+              crossFadeState: selected
+                  ? CrossFadeState.showSecond
+                  : CrossFadeState.showFirst,
+              // Use Positioned.fill() to pass the constraints to its children.
+              // This allows the Images to use BoxFit.cover to cover the correct
+              // size
+              layoutBuilder:
+                  (topChild, topChildKey, bottomChild, bottomChildKey) {
+                return Stack(
+                  children: <Widget>[
+                    Positioned.fill(
+                      key: bottomChildKey,
+                      child: bottomChild,
+                    ),
+                    Positioned.fill(
+                      key: topChildKey,
+                      child: topChild,
+                    ),
+                  ],
+                );
+              },
+              firstChild: Image.asset(
+                'assets/eat_cape_town_sm.jpg',
+                fit: BoxFit.cover,
+              ),
+              secondChild: Image.asset(
+                'assets/eat_new_orleans_sm.jpg',
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}