Merge pull request #2 from Iconica-Development/feature/add-opacity-transition

feat: add opacity to card transition

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.0
+
+* add opacity as an option to the card transform
+
 ## 0.0.1
 
 * TODO: Describe initial release.

example/lib/main.dart

@@ -60,16 +60,47 @@ class _CarouselExampleAppState extends State<CarouselExampleApp> {
                     onCardClick: _onClick,
                     transforms: [
                       CardTransform(
-                          x: 220, y: -85, angle: -math.pi / 12, scale: 0.3),
+                        x: 220,
+                        y: -85,
+                        angle: -math.pi / 12,
+                        scale: 0.3,
+                        opacity: 0.2,
+                      ),
                       CardTransform(
-                          x: 230, y: -80, angle: math.pi / 12, scale: 0.5),
+                        x: 230,
+                        y: -80,
+                        angle: math.pi / 12,
+                        scale: 0.5,
+                        opacity: 0.4,
+                      ),
                       CardTransform(
-                          x: 200, y: -75, angle: -math.pi / 12, scale: 0.6),
+                        x: 200,
+                        y: -75,
+                        angle: -math.pi / 12,
+                        scale: 0.6,
+                        opacity: 0.6,
+                      ),
                       CardTransform(
-                          x: 110, y: -60, angle: math.pi / 12, scale: 0.7),
-                      CardTransform(x: 0, y: 0, angle: 0, scale: 1),
+                        x: 110,
+                        y: -60,
+                        angle: math.pi / 12,
+                        scale: 0.7,
+                        opacity: 0.8,
+                      ),
                       CardTransform(
-                          x: -270, y: 70, angle: -math.pi / 50, scale: 1),
+                        x: 0,
+                        y: 0,
+                        angle: 0,
+                        scale: 1,
+                        opacity: 1.0,
+                      ),
+                      CardTransform(
+                        x: -270,
+                        y: 70,
+                        angle: -math.pi / 50,
+                        scale: 1,
+                        opacity: 0.5,
+                      ),
                     ],
                     builder: _buildCard,
                   ),

lib/src/models/card_transform.dart

@@ -5,11 +5,21 @@ class CardTransform {
     this.y = 0,
     this.angle = 0,
     this.scale = 1,
-  });
+    this.opacity = 1.0,
+  })  : assert(
+          opacity >= 0,
+          'Opacity cannot be negative',
+        ),
+        assert(
+          opacity <= 1.0,
+          'Opacity needs to be between 0.0 and 1.0',
+        );
+
   double x;
   double y;
   double angle;
   double scale;
+  double opacity;
 
   /// [transitionPos] is a position value of a swipe for example.
   /// [other] is the position, scale, rotation
@@ -20,6 +30,7 @@ class CardTransform {
       y: _transformValue(y, other.y, transitionPos),
       angle: _transformValue(angle, other.angle, transitionPos),
       scale: _transformValue(scale, other.scale, transitionPos),
+      opacity: _transformValue(opacity, other.opacity, transitionPos),
     );
   }
 

lib/src/widgets/carousel_card.dart

@@ -20,9 +20,12 @@ class CarouselCard extends StatelessWidget {
         angle: cardTransform.angle,
         child: Transform.scale(
           scale: cardTransform.scale,
+          child: Opacity(
+            opacity: cardTransform.opacity,
             child: child,
           ),
         ),
+      ),
     );
   }
 }

pubspec.yaml

@@ -1,7 +1,6 @@
 name: carousel
 description: card carousel
-version: 0.0.1
-homepage:
+version: 0.1.0
 
 environment:
   sdk: ">=2.17.6 <3.0.0"