BakerJQ / Flutter Infinitecards
Licence: apache-2.0
An infinite card switching UI for Flutter, support custom animation 自定义实现神奇动效的卡片切换视图
Stars: ✭ 333
Programming Languages
dart
5743 projects
Projects that are alternatives of or similar to Flutter Infinitecards
Uicard
Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire...
Stars: ✭ 142 (-57.36%)
Mutual labels: card, cards, cardview
React Native Cardview
Native CardView for react-native (All Android version and iOS)
Stars: ✭ 426 (+27.93%)
Mutual labels: card, cardview
Android Infinitecards
An infinite card switching UI for Android, support custom animation 自定义实现神奇动效的卡片切换视图
Stars: ✭ 1,692 (+408.11%)
Mutual labels: card, cardview
Readme Template
📜 Modelos readme para qualquer pessoa copiar e usar em seu GitHub.
Stars: ✭ 287 (-13.81%)
Mutual labels: card, cards
Cardslideview
一行代码实现ViewPager卡片效果,比ViewPager2更强大,底层同样是RecyclerView
Stars: ✭ 301 (-9.61%)
Mutual labels: card, cardview
Timelinecards
Presenting timelines as cards, single or bundled in scrollable feed!
Stars: ✭ 415 (+24.62%)
Mutual labels: card, cards
Zlayoutmanager
Some custom LayoutManager .Such as SwipeCard、FLowLayout。一些自定义的LayoutManager,仿探探、人人影视 炫动滑动 卡片层叠 和流式布局等。
Stars: ✭ 2,404 (+621.92%)
Mutual labels: card, cards
flip view
A Flutter app with flip animation to view profiles of friends. 🌟
Stars: ✭ 69 (-79.28%)
Mutual labels: card, cardview
Android-Material-Design-Template
Android Material Design UI Template , with Google Design support , card view , butterknife , CoordinateLayout , CollapsingToolbar .
Stars: ✭ 56 (-83.18%)
Mutual labels: card, cardview
Shuffle
🔥 A multi-directional card swiping library inspired by Tinder
Stars: ✭ 535 (+60.66%)
Mutual labels: cards, cardview
Vue Content Loading
Vue component to easily build (or use presets) SVG loading cards Facebook like.
Stars: ✭ 729 (+118.92%)
Mutual labels: card, cards
TimelineCards
Presenting timelines as cards, single or bundled in scrollable feed!
Stars: ✭ 423 (+27.03%)
Mutual labels: cards, card
dotacard
You are at FODA artwork repository. Play now for free
Stars: ✭ 22 (-93.39%)
Mutual labels: cards, card
react-native-shadow-cards
Cards are a great way to display information, usually containing content and actions about a single subject. Cards can contain images, buttons, text and more.
Stars: ✭ 42 (-87.39%)
Mutual labels: card, cardview
Epiboard
Web Extension — A new tab page extension with material design and useful features 🆕 🎉
Stars: ✭ 262 (-21.32%)
Mutual labels: card
Bottom Sheet
⬆️ A SwiftUI view component sliding in from bottom
Stars: ✭ 252 (-24.32%)
Mutual labels: card
Cercle
Cercle is a CRM+Project Manager for your organization - Phoenix Framework & Vuejs
Stars: ✭ 284 (-14.71%)
Mutual labels: card
InfiniteCards
An infinite card switching UI for Flutter, support custom animation 可自定义动效的卡片切换视图(中文文档)
Android version
https://github.com/BakerJQ/Android-InfiniteCards
Flutter for Web version
https://github.com/BakerJQ/Flutter-InfiniteCards/tree/web
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].