robertodevs / flutter_ecommerce_template Goto Github PK

import 'package:flutter/material.dart';
import 'package:parallax_image/parallax_image.dart';
import 'package:ecommerce_int2/screens/staggeredList/card_list_screen.dart';

class CCategoryCard extends StatelessWidget {
  final Color begin;
  final Color end;
  final String categoryName;
  final String assetPath;

  CCategoryCard(
      {Key key,
        this.controller,
        this.begin,
        this.end,
        this.categoryName,
        this.assetPath})
      :

        height = Tween<double>(begin: 200, end: 150.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(
              0.0,
              0.400,
              curve: Curves.ease,
            ),
          ),
        ),
        itemHeight = Tween<double>(begin: 0, end: 180.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: Interval(
              0.0,
              0.900,
              curve: Curves.ease,
            ),
          ),
        ),

        super(key: key);


  final Animation<double> controller;
  final Animation<double> height;
  final Animation<double> itemHeight;

  Widget _buildAnimation(BuildContext context, Widget child) {
    return Container(
      child: Column(
        children: <Widget>[
               Container(
                height: height.value,
                width: MediaQuery.of(context).size.width,

                  child: new ParallaxImage(
                    extent: 200.0,

                    image: new AssetImage(
                      assetPath,
                    ),

                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children:<Widget>[
                      Container(
                        padding: const EdgeInsets.all(16.0),
                        alignment: Alignment(-1, 0),
                        child: new Text(categoryName,
                        style: TextStyle(fontSize: 22,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),),),

                      Container(
                        //padding: const EdgeInsets.all(16.0),
                          decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(24))),
                        padding:
                        const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                        child: Text(
                          'View more',
                          style: TextStyle(color: end, fontWeight: FontWeight.bold),
                        ),),],),),
              ),

          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(bottom: 16.0),
                height: itemHeight.value,
                child:  CardListScreen(),       //list view
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}

class StaggeredCardCard extends StatefulWidget {
  final Color begin;
  final Color end;
  final String categoryName;
  final String assetPath;
  final String imagePath;

  const StaggeredCardCard(
      {Key key, this.begin, this.end, this.categoryName, this.assetPath, this.imagePath})
      : super(key: key);

  @override
  _StaggeredCardCardState createState() => _StaggeredCardCardState();
}

class _StaggeredCardCardState extends State<StaggeredCardCard>
    with TickerProviderStateMixin {
  AnimationController _controller;
  bool isActive = false;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
        duration: const Duration(milliseconds: 300), vsync: this);
  }


  Future<void> _playAnimation() async {
    try {
      await _controller.forward().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    }
  }

  Future<void> _reverseAnimation() async {
    try {
      await _controller.reverse().orCancel;
    } on TickerCanceled {
      // the animation got canceled, probably because we were disposed
    }
  }

  @override
  Widget build(BuildContext context) {
    var timeDilation = 10.0; // 1.0 is normal animation speed.
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        if (isActive) {
          isActive = !isActive;
          _reverseAnimation();
        }

        else {
          isActive = !isActive;
          _playAnimation();
        }
      },
      child: CCategoryCard(
        controller: _controller.view,
        categoryName: widget.categoryName,
        begin: widget.begin,
        end: widget.end,
        assetPath: widget.assetPath,
      ),
    );
  }
}