Flutter allows you to make delightful, natively compiled applications. The explanation Flutter can do this is that Flutter loves Material. Material is a design framework that helps construct high-quality, digital experiences. As UI configuration keeps advancing, Material keeps on refreshing its components, motion, and design system.
In this blog, we will explore the Sliding Card In Flutter. We will also implement a demo program and learn to create a sliding card with a sliding animation effect using the sliding_card package in your flutter applications.
sliding_card | Flutter Package
The sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding…pub. dev
Table Of Contents :
Sliding Card :
The Sliding card is a profoundly adjustable flutter package that will help you make delightful Cards with a sliding animation impact. Users can easily add any content to the card for use flutter application.
Demo Module :
This demo video shows how to create a sliding card in a flutter. It shows how the sliding card will work using the sliding_card package in your flutter applications. It shows a bouncing animation of a card that separates into two different cards open. It will be shown on your device.
Properties:
There are some properties of a sliding card are:
- > slidingAnimationReverseCurve: This property is used to the curve of the sliding animation when reserving. It is preferable to leave it to its default value.
- > hiddenCardHeight: This property is used to height the hidden card less than or equal to 90% of the frontCard Widget.
- > frontCardWidget: This property is used to the widget to be displayed on the front.
Note: It’s parent widget is a container.
- > backCardWidget: This property is used to the widget to be displayed on the back. Its height should be less than or equal to the height of the front card.
- > animateOpacity: This property is used to this gives a good visual effect. Leave this to true for a more realistic.
- > slidingAnimmationForwardCurve: This property is used to the curve of the sliding animation when expanding. It is preferable to leave it to its default value
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
sliding_card:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/images/
Step 3: Import
import 'package:sliding_card/sliding_card.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called home_page.dart inside the lib folder.
First, we will create a SlidingCardController and give any name. We will create an initState() method. In this method, we will add a supper dot initstate(), and the controller is equal to the SlidingCardController(). SlidingCardController() Class is used to control the opening and closing of the card.
SlidingCardController controller ;
@override
void initState() {
super.initState();
controller = SlidingCardController();
}
In the body, we will add a center widget. Inside the widget, we will add the column widget and add the InterviewCard()class. In this class, we will add the onTapped function; if the controller isCardSeparated is true, then it is collapsed the card else expanded the card. Below, we will deeply define InterviewCard()class.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
InterviewCard(
onTapped: () {
if(controller.isCardSeparated == true)
{
controller.collapseCard();
}
else
{
controller.expandCard();
}
},
slidingCardController: controller,
)
],
),
),
Create a new dart file called inteview_card.dart inside the lib folder.
We will create two constructors that are slidingCardController and onTapped function.
const InterviewCard({
Key key,
this.slidingCardController , @required this.onTapped
}) : super(key: key);
final SlidingCardController slidingCardController;
final Function onTapped;
Now, we will return a GestureDetector(). Inside we will add an OnTap function and child property. It’s Child property, and we will add SlidingCard(). Inside SlidingCard, we will add a slimeCardElevation, bounceInOut curves are slidingAnimationReverseCurve, cardsGap is space between the two cards, controller, slidingCardWidth is the width of the overall card, visibleCardHeight is the height of the front card, hiddenCardHeight is the height of the back card, It cannot be greater than the height of the front card. frontCardWidget, and backCardWidget we will describe below.
return GestureDetector(
onTap: (){
widget.onTapped();
},
child: SlidingCard(
slimeCardElevation: 0.5,
slidingAnimationReverseCurve: Curves.bounceInOut,
cardsGap: DeviceSize.safeBlockVertical,
controller: widget.slidingCardController,
slidingCardWidth: DeviceSize.horizontalBloc * 90,
visibleCardHeight: DeviceSize.safeBlockVertical * 27,
hiddenCardHeight: DeviceSize.safeBlockVertical * 15,
frontCardWidget: InterviewFrontCard(...),
backCardWidget: InterviewBackCard(...),
);
Now, we will deeply describe frontCardWidget:
In the frontCardWidget, we will create a class InterviewFrontCard(). We will add a title, image, name, surname, two buttons, and an info icon to this card. When the user taps the icon, then the card was expanded, and again tap then collapsed the card.
InterviewFrontCard(
candidateName: '@Astin',
candidateSurname: 'Martin',
interviewDate: '9 March 2021 ',
interviewTime: '2:30Pm',
onInfoTapped: () {
print('info pressed');
widget.slidingCardController.expandCard();
},
onDecline: () {
print('Declined');
},
onAccept: () {
print('Accepted');
},
onCloseButtonTapped: (){
widget.slidingCardController.collapseCard();
},
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will deeply describe backCardWidget:
In the backCardWidget, we will create a class InterviewBackCard(). In this card, we will add a title, content, and phone icon. When the user taps the info icon, then it will be shown the back card, and otherwise not.
InterviewBackCard(
onPhoneTapped: (){},
companyInfo: "FlutterDevs specializes in creating cost-effective and efficient "
"applications with our perfectly crafted."
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:sliding_card/sliding_card.dart';
import 'interview_back_card.dart';
import 'interview_front_card.dart';
import 'device_size.dart';
class InterviewCard extends StatefulWidget {
const InterviewCard({
Key key,
this.slidingCardController , @required this.onTapped
}) : super(key: key);
final SlidingCardController slidingCardController;
final Function onTapped;
@override
_InterviewCardState createState() => _InterviewCardState();
}
class _InterviewCardState extends State<InterviewCard> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
widget.onTapped();
},
child: SlidingCard(
slimeCardElevation: 0.5,
slidingAnimationReverseCurve: Curves.bounceInOut,
cardsGap: DeviceSize.safeBlockVertical,
controller: widget.slidingCardController,
slidingCardWidth: DeviceSize.horizontalBloc * 90,
visibleCardHeight: DeviceSize.safeBlockVertical * 27,
hiddenCardHeight: DeviceSize.safeBlockVertical * 15,
frontCardWidget: InterviewFrontCard(
candidateName: '@Astin',
candidateSurname: 'Martin',
interviewDate: '9 March 2021 ',
interviewTime: '2:30Pm',
onInfoTapped: () {
print('info pressed');
widget.slidingCardController.expandCard();
},
onDecline: () {
print('Declined');
},
onAccept: () {
print('Accepted');
},
onCloseButtonTapped: (){
widget.slidingCardController.collapseCard();
},
),
backCardWidget:InterviewBackCard(
onPhoneTapped: (){},
companyInfo: "FlutterDevs specializes in creating cost-effective and efficient "
"applications with our perfectly crafted."
),
),
);
}
}
Conclusion :
In the article, I have explained the Sliding Card basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Sliding Card On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Sliding Card in your flutter projects. We will show you what the Sliding Card is?. Some sliding card properties, make a demo program for working Sliding Card and show a beautiful bounceInOut animation of a Card with a sliding animation effect that separates into two different Cards, one at the front and then another at the back using the sliding_card package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Sliding Card Demo:
flutter-devs/flutter_sliding_card_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
