Product Page section expanding animation

packages/smooth_app/lib/cards/expandables/attribute_list_expandable.dart

@@ -70,11 +70,11 @@ class AttributeListExpandable extends StatelessWidget {
     );
     if (!collapsible) {
       return SmoothCard(
-        collapsed: null,
         content: content,
         background: background,
       );
     }
+
     final Widget header =
         Text(title, style: Theme.of(context).textTheme.headline3);
     return SmoothExpandableCard(

packages/smooth_app/lib/pages/list_page.dart

@@ -115,7 +115,6 @@ class _ListPageState extends State<ListPage> {
             Colors.blue,
             ColorDestination.SURFACE_BACKGROUND,
           ),
-          collapsed: null,
           content: ListTile(
             leading: Icon(Icons.add, size: iconSize),
             onTap: () async => await _add(daoProductList),

packages/smooth_app/lib/pages/pantry/common/pantry_list_page.dart

@@ -97,7 +97,6 @@ class _PantryListPageState extends State<PantryListPage> {
             Colors.blue,
             ColorDestination.SURFACE_BACKGROUND,
           ),
-          collapsed: null,
           content: ListTile(
             leading: Icon(Icons.add, size: iconSize),
             onTap: () async => await _add(userPreferences),

packages/smooth_app/lib/pages/product/product_page.dart

@@ -389,6 +389,7 @@ class _ProductPageState extends State<ProductPage> {
 
     listItems.add(_buildProductImagesCarousel(context));
 
+    // Brands, quantity
     listItems.add(
       Padding(
         padding: const EdgeInsets.all(16.0),
@@ -413,11 +414,14 @@ class _ProductPageState extends State<ProductPage> {
         ),
       ),
     );
+
     final Map<String, Attribute> matchingAttributes =
         Match.getMatchingAttributes(_product, mainAttributes);
     final double opacity = themeData.brightness == Brightness.light
         ? 1
         : SmoothTheme.ADDITIONAL_OPACITY_FOR_DARK;
+
+    //Nutri, Nova
     for (final String attributeId in mainAttributes) {
       if (matchingAttributes[attributeId] != null) {
         listItems.add(
@@ -432,11 +436,13 @@ class _ProductPageState extends State<ProductPage> {
         );
       }
     }
+
     for (final AttributeGroup attributeGroup
         in _getOrderedAttributeGroups(userPreferencesModel)) {
       listItems.add(_getAttributeGroupWidget(attributeGroup, iconWidth));
     }
 
+    //Similar foods
     if (_product.categoriesTags != null && _product.categoriesTags.isNotEmpty) {
       for (int i = _product.categoriesTags.length - 1;
           i < _product.categoriesTags.length;
@@ -450,7 +456,6 @@ class _ProductPageState extends State<ProductPage> {
               materialColor,
               ColorDestination.SURFACE_BACKGROUND,
             ),
-            collapsed: null,
             content: ListTile(
               leading: Icon(
                 Icons.search,

packages/smooth_ui_library/lib/widgets/smooth_card.dart

@@ -3,13 +3,11 @@ import 'package:flutter/material.dart';
 
 class SmoothCard extends StatelessWidget {
   const SmoothCard({
-    @required this.collapsed,
     @required this.content,
     this.background,
     this.header,
   });
 
-  final bool collapsed;
   final Widget content;
   final Color background;
   final Widget header;
@@ -27,20 +25,8 @@ class SmoothCard extends StatelessWidget {
             padding: const EdgeInsets.all(12.0),
             child: Column(
               children: <Widget>[
-                if (collapsed != null)
-                  Row(
-                    mainAxisSize: MainAxisSize.max,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: <Widget>[
-                      Container(child: header),
-                      if (collapsed != null)
-                        Icon(collapsed
-                            ? Icons.keyboard_arrow_down
-                            : Icons.keyboard_arrow_up),
-                    ],
-                  ),
-                if (collapsed != true) content,
+                header,
+                content,
               ],
             ),
           ),

packages/smooth_ui_library/lib/widgets/smooth_expandable_card.dart

@@ -1,59 +1,102 @@
+import 'dart:math';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import 'package:smooth_ui_library/widgets/models/single_boolean_model.dart';
-import 'package:smooth_ui_library/widgets/smooth_card.dart';
 
-class SmoothExpandableCard extends StatelessWidget {
+class SmoothExpandableCard extends StatefulWidget {
   const SmoothExpandableCard({
     @required this.collapsedHeader,
-    this.expandedHeader,
     @required this.content,
+    this.expandedHeader,
     this.background,
   });
 
   final Widget collapsedHeader;
   final Widget expandedHeader;
   final Color background;
   final Widget content;
+  @override
+  _SmoothExpandableCardState createState() => _SmoothExpandableCardState();
+}
+
+class _SmoothExpandableCardState extends State<SmoothExpandableCard>
+    with SingleTickerProviderStateMixin {
+  bool collapsed = true;
+  AnimationController _controller;
+  Animation<double> animation;
+  static const Duration _ANIMATION_DURATION = Duration(milliseconds: 160);
+
+  @override
+  void initState() {
+    super.initState();
+    _controller =
+        AnimationController(vsync: this, duration: _ANIMATION_DURATION);
+    animation = Tween<double>(begin: 0, end: pi).animate(_controller);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return ChangeNotifierProvider<SingleBooleanModel>(
-      create: (BuildContext context) => SingleBooleanModel(),
-      child: Consumer<SingleBooleanModel>(
-        builder: (BuildContext context, SingleBooleanModel singleBooleanModel,
-            Widget child) {
-          return AnimatedCrossFade(
-            duration: const Duration(milliseconds: 160),
-            firstCurve: Curves.easeInOutBack,
-            secondCurve: Curves.easeInOutBack,
-            firstChild: _buildExpandedWidget(
-                singleBooleanModel, Theme.of(context), true),
-            secondChild: _buildExpandedWidget(
-                singleBooleanModel, Theme.of(context), false),
-            crossFadeState: singleBooleanModel.isActive
-                ? CrossFadeState.showSecond
-                : CrossFadeState.showFirst,
-          );
-        },
-      ),
+    return AnimatedCrossFade(
+      duration: _ANIMATION_DURATION,
+      crossFadeState: CrossFadeState.showFirst,
+      firstChild: _buildCard(),
+      secondChild: _buildCard(),
     );
   }
 
-  Widget _buildExpandedWidget(
-    final SingleBooleanModel singleBooleanModel,
-    final ThemeData themeData,
-    final bool collapsed,
-  ) {
+  Widget _buildCard() {
     return GestureDetector(
-      onTap: () => collapsed
-          ? singleBooleanModel.setActive()
-          : singleBooleanModel.setInactive(),
-      child: SmoothCard(
-        collapsed: collapsed,
-        content: content,
-        header: collapsed == true ? collapsedHeader : expandedHeader,
+      onTap: () {
+        setState(() {
+          collapsed = !collapsed;
+          animation.value == 0 ? _controller.forward() : _controller.reverse();
+        });
+      },
+      child: Padding(
+        padding: const EdgeInsets.only(
+            right: 8.0, left: 8.0, top: 4.0, bottom: 20.0),
+        child: Material(
+          elevation: 8.0,
+          shadowColor: Colors.black45,
+          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
+          color: widget.background ?? Theme.of(context).colorScheme.surface,
+          child: Container(
+            padding: const EdgeInsets.all(12.0),
+            child: Column(
+              children: <Widget>[
+                Row(
+                  mainAxisSize: MainAxisSize.max,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Container(
+                      child: collapsed
+                          ? widget.collapsedHeader
+                          : widget.expandedHeader ?? widget.collapsedHeader,
+                    ),
+                    AnimatedBuilder(
+                      animation: animation,
+                      child: const Icon(Icons.keyboard_arrow_down),
+                      builder: (BuildContext context, Widget child) {
+                        return Transform.rotate(
+                          angle: animation.value,
+                          child: child,
+                        );
+                      },
+                    ),
+                  ],
+                ),
+                if (collapsed != true) widget.content,
+              ],
+            ),
+          ),
+        ),
       ),
     );
   }