The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.
In this blog, we will explore the Vertical Card Pager In Flutter. We will also implement a demo of the Vertical Card Pager, and describes its properties. and how to use them in your flutter applications. So let’s get started.
Table of Contents :
Vertical Card Pager :
A vertical card pager displays an animated card list in the application by scrolling vertically. It is a very beautiful and dynamic card view pager. We can define the card pager list differently. Let us understand in detail about its properties
vertical_card_pager | Flutter Package
Add this to your package’s pubspec.yaml file: dependencies: vertical_card_pager: ^1.4.0 You can install packages from…pub.dev
The following are the basic properties of the Vertical Card Pager.
- titles: The title property is used to display some of its details in the card, it is a type of list.
- align: You can use the align property to arrange the list item, according to it according to left, centre and right.
- images: We use the images property to display the image in the list item, it is a type of list.
- textStyle: Using the text style property, we can reduce the size of the text of the title and change the color of the text.
Demo Module :
Implementation :
You need to implement it in your code respectively :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
vertical_card_pager: ^1.4.0
Step 2: import the package :
import 'package:vertical_card_pager/vertical_card_pager.dart';
Step 3: Run flutter package get
How to implement code in dart file :
Create a new dart file called vertical_card_pager_demo.dart inside the lib folder.
First of all, we have created a list of the titles in which we have named the tiles.
final List<String> titles = [
"RED",
"YELLOW",
"CYAN",
"BLUE",
"GREY",
];
Before using this widget, an image variable has been defined which is list type. In this, we have given the color of the items which have been defined in the images property.
final List<Widget> images = [
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
];
Before using this widget, we have created a container inside which uses the vertical card widget, in this, we have given the color of the item which is of list type in its titles and image properties and centre the list item.
These are snapshots image after running the app.
Code File :
import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
class VerticalCardPagerDemo extends StatefulWidget {
@override
_VerticalCardPagerDemoState createState() => _VerticalCardPagerDemoState();
}
class _VerticalCardPagerDemoState extends State<VerticalCardPagerDemo> {
final List<String> titles = [
"RED",
"YELLOW",
"CYAN",
"BLUE",
"GREY",
];
@override
Widget build(BuildContext context) {
final List<Widget> images = [
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
];
return Scaffold(
appBar: AppBar(
title: Text(
'Vertical Card Pager',
style: TextStyle(color: Colors.white),
),
centerTitle: true,
),
body: SafeArea(
child: Expanded(
child: Container(
child: VerticalCardPager(
textStyle:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
titles: titles,
images: images,
onPageChanged: (page) {},
align: ALIGN.CENTER,
onSelectedItem: (index) {},
),
),
),
),
);
}
}
Conclusion :
In the article, I have explained the basic structure of Vertical Card Pager in a flutter; you can modify this code according to your choice. This was a small introduction to Vertical Card Pager 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 Vertical Card Pager in your flutter project. We will show you the Vertical Card Pager is?, and work on it 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.
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.
