Skip to content
An infinite card switching UI for Flutter, support custom animation 自定义实现神奇动效的卡片切换视图
Branch: master
Clone or download
Latest commit ae4f391 Apr 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example update badge Apr 3, 2019
lib update badge Apr 3, 2019
screenshot update screenshot Apr 2, 2019
.gitignore
.metadata
CHANGELOG.md update badge Apr 3, 2019
LICENSE first commit Apr 1, 2019
README.md Update README.md Apr 3, 2019
README_cn.md Update README_cn.md Apr 3, 2019
pubspec.yaml update badge Apr 3, 2019

README.md

InfiniteCards

License pub package

An infinite card switching UI for Flutter, support custom animation 可自定义动效的卡片切换视图(中文文档

Android version

https://github.com/BakerJQ/Android-InfiniteCards

Screenshot

Android iOS

Example

cd ./example
flutter create .
flutter run

How to use

Add dependencies

dependencies:
  infinite_cards: ^1.0.3

Build controller in initState

@override
  void initState() {
    super.initState();
    _controller = InfiniteCardsController(
      itemBuilder: _renderItem,
      itemCount: 5,
      animType: AnimType.SWITCH,
    );
  }
  • animType : animation type
    • TO_FRONT : move the selected card to first
    • SWITCH : move the selected card to first, and the first card to the selected position
    • TO_END : move the first card to last position

Build widget with controller

InfiniteCards(
  controller: _controller,
)

Call methods from controller

  _controller.previous();
  _controller.next();
  _controller.reset(...);

Animation transform and curve

Default

If you just use all default animations, just do nothing.

Customisation

InfiniteCardsController(
            ...
            transformToFront: yourCustomTransformToFront,
            transformToBack: yourCustomTransformToBack,
            curve: yourCustomCurve
            ...
          )

One example of implement Transform

Transform _defaultCommonTransform(Widget item, 
    double fraction, double curveFraction, double cardHeight, double cardWidth, int fromPosition, int toPosition) 
  {
  //Count of card which needs to move over
  int positionCount = fromPosition - toPosition;
  //0.8 scale for the first card, and -0.1 per card behind
  //(0.8 - 0.1 * fromPosition) = current specific card scale
  //(0.1 * fraction * positionCount) = scale while moving
  double scale = (0.8 - 0.1 * fromPosition) + (0.1 * fraction * positionCount);
  //translate -0.02 * cardHeight per card behind
  //-cardHeight * (0.8 - scale) * 0.5 to center the card
  double translationY = -cardHeight * (0.8 - scale) * 0.5 -
      cardHeight * (0.02 * fromPosition - 0.02 * fraction * positionCount);
  //return the Widget after scale and translate
  return Transform.translate(
    offset: Offset(0, translationY),
    child: Transform.scale(
      scale: scale,
      child: item,
    ),
  );
}

License

InfiniteCards is released under the Apache 2.0 license.

Copyright 2019 BakerJ.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You can’t perform that action at this time.