As mobile application developers, we sometimes need to make sliding, animated, background image carousels. Yet, sometimes, we need to make a sliding card carousel that contains information with various background colors, images, or gradients.
A material design card is a board with marginally adjusted corners and an elevation shadow. A card is a sheet of material used to represent some connected data, such as an album, a geographical location, a meal, contact details, etc.
In this blog, we will explore the Stacked Card Carousel In Flutter. We will also implement a demo program and learn to create a stacked card with a vertical carousel using the stacked_card_carousel package in your flutter applications.
stacked_card_carousel | Flutter Package
A widget for creating a vertical carousel with stacked cards. Import package in your file import…pub. dev
Table Of Contents::
Introduction:
A widget for creating a vertical carousel with stacked cards. Below demo video shows how to create a stacked card with a vertical carousel in a flutter. It shows how the stacked card carousel will work using the stacked_card_carousel package in your flutter applications. It shows a list of vertical carousel sliding cards, and all cards swipe upward and stack that’s called stacked card carousel. It will be shown on your device.
Demo Module :
Attributes:
Some attribute of the stacked card carousel are:
- > items: These attributes mean a list of card widgets.
- > initialOffset: These attributes mean initial vertical top offset for cards.
- > spaceBetweenItems: These attributes mean vertical space between items. Value starts from the top of the first item.
- > applyTextScaleFactor: These attributes mean if set to true scales up space and position linearly according to the text scale factor. Scaling down is omitted.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
stacked_card_carousel:
Step 2: Import
import 'package:stacked_card_carousel/stacked_card_carousel.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: 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 style_card.dart inside the lib folder.
First, we will take three construction ‘title,’ ‘description’ in the string, and ‘image’ in the image format and called the class on the stacked_card_demo page.
final Image image;
final String title;
final String description;
const StyleCard({
Key key,
this.image,
this.title,
this.description
}) : super(key: key);
We will make a card widget. Inside the card, we will add an elevation property and add a column widget. In the column widget, we will add a container for the image, add a title and description. Then called the card on the stacked_card_demo page.
Card(
elevation: 4.0,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width*0.7,
height: MediaQuery.of(context).size.width*0.65,
child: image,
),
SizedBox(height: 5,),
Text(
title,
style: TextStyle(color: Colors.pinkAccent,fontSize: 22,fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Text(
description,
style: TextStyle(color: Colors.black),textAlign: TextAlign.center,
),
],
),
),
);
Create a new dart file called stacked_card_demo.dart inside the lib folder.
StackedCardCarousel(
initialOffset: 40,
spaceBetweenItems:400 ,
items: styleCards,
),
In the body, we will be called StackedCardCarousel(). Inside we will add initialOffset means is initial vertical top offset for cards, spaceBetweenItems means is vertical space between items. Value starts from the top of the first item. Choose a value that is related to your card size. And the last we will add an item that means the list of card widgets.
Now, we will create a list styleCards and inside add a StyleCard() class.
final List<Widget> styleCards = [
StyleCard(
image: Image.asset("assets/deepak.jpg"),
title: "Team Leader",
description: "It play extremely important role in motivating\nour team and ensuring their success.",
),
StyleCard(
image: Image.asset("assets/yashwant.png"),
title: "Secondary Team Leader ",
description: "It provides guidance, instruction, direction to\nour team. Handsome member in our team.",
),
StyleCard(
image: Image.asset("assets/akshay.png"),
title: "Software Engineer",
description: "Team player, hard worker, expert in\n both andriod and flutter",
),
StyleCard(
image: Image.asset("assets/aditya.png"),
title: "Software Engineer",
description: "Smart, quick learner, and very\ndedicated to the work.",
),
StyleCard(
image: Image.asset("assets/naveen.png"),
title: "Associate Software Engineer",
description: "Flutter developer, keen learner\n very supporting. Bodyguard of our team",
),
StyleCard(
image: Image.asset("assets/mohit.png"),
title: "Associate Software Engineer",
description: "Responsible team member,situation handler,\nand a sharp learner with flutter and blogs.",
),
StyleCard(
image: Image.asset("assets/shaiq.png"),
title: "Associate Software Engineer",
description: "Flutter developer with a passion for learning,\nstar blogger, punctual and \na handsome teammate.",
),
StyleCard(
image: Image.asset("assets/rakhi.png"),
title: "Associate Software Engineer",
description: "Newest team member, with high passion for\nlearning very sharp,and dedicated.Need more\ntime to know about you.",
),
];
We will create an eight-style card and inside add an image, title, and description. Add all data on StackedCardCarousel(). When the code run, you will saw a list of cards. When the user swipes up in vertical carousel format only, all cards will overlap and stack into another called a stacked card carousel; when the user swipes down all up cards in vertical format, then all cards back to the original position. 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:flutter_stacked_card_carousel/style_card.dart';
import 'package:stacked_card_carousel/stacked_card_carousel.dart';
class StackedCardDemo extends StatefulWidget {
@override
_StackedCardDemoState createState() => _StackedCardDemoState();
}
class _StackedCardDemoState extends State<StackedCardDemo> {
final List<Widget> styleCards = [
StyleCard(
image: Image.asset("assets/deepak.jpg"),
title: "Team Leader",
description: "It play extremely important role in motivating\nour team and ensuring their success.",
),
StyleCard(
image: Image.asset("assets/yashwant.png"),
title: "Secondary Team Leader ",
description: "It provides guidance, instruction, direction to\nour team. Handsome member in our team.",
),
StyleCard(
image: Image.asset("assets/akshay.png"),
title: "Software Engineer",
description: "Team player, hard worker, expert in\n both andriod and flutter",
),
StyleCard(
image: Image.asset("assets/aditya.png"),
title: "Software Engineer",
description: "Smart, quick learner, and very\ndedicated to the work.",
),
StyleCard(
image: Image.asset("assets/naveen.png"),
title: "Associate Software Engineer",
description: "Flutter developer, keen learner\n very supporting. Bodyguard of our team",
),
StyleCard(
image: Image.asset("assets/mohit.png"),
title: "Associate Software Engineer",
description: "Responsible team member,situation handler,\nand a sharp learner with flutter and blogs.",
),
StyleCard(
image: Image.asset("assets/shaiq.png"),
title: "Associate Software Engineer",
description: "Flutter developer with a passion for learning,\nstar blogger, punctual and \na handsome teammate.",
),
StyleCard(
image: Image.asset("assets/rakhi.png"),
title: "Associate Software Engineer",
description: "Newest team member, with high passion for\nlearning very sharp,and dedicated.Need more\ntime to know about you.",
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Stacked Card Carousel Demo'),
),
body: StackedCardCarousel(
initialOffset: 40,
spaceBetweenItems:400 ,
items: styleCards,
),
);
}
}
Conclusion :
In the article, I have explained the basic structure of a Stacked Card Carousel in a flutter; you can modify this code according to your choice. This was a small introduction to Stacked Card Carousel On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Stacked Card Carousel in your flutter projects. We will show you what the Stacked Card Carousel is?. Make a demo program for working Stacked Card Carousel and show all the cards will be a swipe up in vertical carousel format, then all cards will be overlap and stack into another 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 Stacked Card Carousel Demo:
flutter-devs/flutter_stacked_card_carousel_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.
