add carousel, card_swipe, and focus_image samples (#119)

* add carousel, card_swipe, and focus_image samples * fix image assets * fix more asset images * add repeating animation * fix import * add copyright headers * remove Center widget * imageAssetName * use ClipRect, refactor _SwipeableCardState * use offset.zero * add comments * remove reference to coverflow package * change spread to toList() * refactor coverflow sample don't set width and height use const data -> images * return widget directly, fix formatting * inline transitionsBuilder * image -> imageAssetName * _rectTween() => _createTween() * _expandToPageRoute -> _createRoute * move non-updating widgets out of AnimatedBuilder * code review updates to animations demos
2026-05-11 09:27:08 +00:00 · 2019-07-29 09:11:03 -07:00
parent 8e4d8c138b
commit 4966440a29
6 changed files with 480 additions and 1 deletions
--- a/animations/lib/src/misc/focus_image.dart
+++ b/animations/lib/src/misc/focus_image.dart
@@ -0,0 +1,113 @@
+// 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 FocusImageDemo extends StatelessWidget {
+  static String routeName = '/misc/focus_image';
+
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Focus Image')),
+      body: Grid(),
+    );
+  }
+}
+
+class Grid extends StatelessWidget {
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: GridView.builder(
+        itemCount: 40,
+        gridDelegate:
+            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
+        itemBuilder: (context, index) {
+          return (index >= 20)
+              ? SmallCard('assets/eat_cape_town_sm.jpg')
+              : SmallCard('assets/eat_new_orleans_sm.jpg');
+        },
+      ),
+    );
+  }
+}
+
+Route _createRoute(BuildContext parentContext, String image) {
+  return PageRouteBuilder(
+    pageBuilder: (context, animation, secondaryAnimation) {
+      return _SecondPage(image);
+    },
+    transitionsBuilder: (context, animation, secondaryAnimation, child) {
+      var rectAnimation = _createTween(parentContext)
+          .chain(CurveTween(curve: Curves.ease))
+          .animate(animation);
+
+      return Stack(
+        children: [
+          PositionedTransition(rect: rectAnimation, child: child),
+        ],
+      );
+    },
+  );
+}
+
+Tween<RelativeRect> _createTween(BuildContext context) {
+  var windowSize = MediaQuery.of(context).size;
+  var box = context.findRenderObject() as RenderBox;
+  var rect = box.localToGlobal(Offset.zero) & box.size;
+  var relativeRect = RelativeRect.fromSize(rect, windowSize);
+
+  return RelativeRectTween(
+    begin: relativeRect,
+    end: RelativeRect.fill,
+  );
+}
+
+class SmallCard extends StatelessWidget {
+  final String imageAssetName;
+
+  SmallCard(this.imageAssetName);
+
+  Widget build(BuildContext context) {
+    return Card(
+      child: Material(
+        child: InkWell(
+          onTap: () {
+            var nav = Navigator.of(context);
+            nav.push(_createRoute(context, imageAssetName));
+          },
+          child: Image.asset(
+            imageAssetName,
+            fit: BoxFit.cover,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SecondPage extends StatelessWidget {
+  final String imageAssetName;
+
+  _SecondPage(this.imageAssetName);
+
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: Center(
+        child: Material(
+          child: InkWell(
+            onTap: () => Navigator.of(context).pop(),
+            child: AspectRatio(
+              aspectRatio: 1,
+              child: Image.asset(
+                imageAssetName,
+                fit: BoxFit.cover,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}