How to move the position of the cards from right to bottom

Question

I have a list of cards to display and i have used a package card_selector: ^0.1.0, but i want to change the UI. I want to display the remaining cards below as shown in the image. I tried and i couldn't able to achieve this.

Below i have attached the image and the code used in this package.

Thanks in advance, Please help me to achieve this.

https://i.stack.imgur.com/s2tt1.png

 Widget cardWidget(Widget w, int position) {
    var cardListLength = widget.cards.length;

    var positionFirstCard = 0;
    if (csState == CardSelectorState.target) positionFirstCard = 1;
    if (csState == CardSelectorState.targetBack) positionFirstCard = -1;
    if (csState == CardSelectorState.switchingBack) positionFirstCard = -1;

    var cardWidth = widget.mainCardWidth;
    var cardHeight = widget.mainCardHeight;

    if (position > positionFirstCard) {
      var idx = cardListLength - position + positionFirstCard;

      var factor = scaleBetween(idx, widget.lastCardSizeFactor, 1.0, 0, cardListLength);

      cardWidth = widget.mainCardWidth * factor;
      cardHeight = widget.mainCardHeight * factor;
    }

    var leftPadding = widget.mainCardPadding;
    if (position > positionFirstCard) {
      var idx = cardListLength - position + positionFirstCard;
      var leftPosAlignRight = widget.mainCardPadding + widget.mainCardWidth - cardWidth;
      leftPadding = leftPosAlignRight +
          (position - positionFirstCard) * scaleBetween(idx, widget.cardsGap / 2, widget.cardsGap, 0, cardListLength - positionFirstCard);
    }

    var opacity = 1.0;
    if (position > positionFirstCard) {
      opacity = scaleBetween(cardListLength - position, 0.0, opacity, 0, cardListLength - positionFirstCard);
    }

    var factorAnim = scaleBetween(position, 1, 2, 0, _cards.length - 1);
    var duration = (widget.cardAnimationDurationMs * factorAnim).round();
    var draggable = position == 0 && !disableDraggable;

    if (position == 0 && csState == CardSelectorState.target) {
      //place the card off the screen to improve the animation
      leftPadding = -widget.mainCardWidth;
    }

    if (position == 0 && disableFirstCardAnimation) {
      duration = 0;
      disableFirstCardAnimation = false;
    }

    if (position == _cards.length - 1 && disableLastCardAnimation) {
      duration = 0;
      disableLastCardAnimation = false;
    }

    return AnimatedPositioned(
      key: w.key,
      duration: Duration(milliseconds: (duration * 1.5).round()),
      curve: Curves.easeOut,
      top: (widget.mainCardHeight - cardHeight) / 2,
      left: leftPadding,
      child: AnimatedOpacity(
        opacity: opacity,
        curve: Curves.easeOut,
        duration: Duration(milliseconds: duration),
        child: draggable
            ? Draggable(
                data: "card",
                axis: Axis.horizontal,
                feedback: Container(
                  width: cardWidth,
                  height: cardHeight,
                  child: w,
                ),
                childWhenDragging: AnimatedOpacity(
                  opacity: showLastCard ? 1 : 0,
                  duration: Duration(milliseconds: showLastCard ? widget.cardAnimationDurationMs : 0),
                  child: Container(
                    width: cardWidth,
                    height: cardHeight,
                    child: w,
                  ),
                ),
                child: Container(
                  width: cardWidth,
                  height: cardHeight,
                  child: w,
                ),
              )
            : AnimatedContainer(
                duration: Duration(milliseconds: duration),
                curve: Curves.easeOut,
                width: cardWidth,
                height: cardHeight,
                child: w,
              ),
      ),
    );
  }


  scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max) {
    return (maxAllowed - minAllowed) * (unscaledNum - min) / (max - min) + minAllowed;
  }

Answer 1

I do what you want vertically. You can do what you want by correcting the parameters in the code.

Use right instead of top.

Use vertical instead of horizontal.