A material design card. A card has somewhat adjusted corners and a shadow. A card is a sheet of material used to represent some connected data, such as a collection, a geographical area, a meal, contact details, etc. Cards contain substance and actions about a solitary subject.
In this article, we will explore the Card Selector In Flutter. We will see how to implement a demo program of card selector with animation and stacked cards using the card_selector package in your flutter applications.
card_selector | Flutter Package
Widget selector for Flutter using stack. The selector is fully configurable, animation time, the gap between cards, size…pub.dev
Table Of Contents::
Introduction:
Card selector is a widget selector for Flutter utilizing the stack. The selector is completely configurable, animation time, the gap between cards, size factor for stacked cards. Users can swipe cards left to right or right to left. Information will be different on specific cards.
Demo Module :
This demo video shows how to create a card selector in a flutter. It shows how the card selector will work using the card_selector package in your flutter applications. It shows a stacked card, animation, swiping cards left to right or right to left. Content will be change according to cards. A widget to select stacked widgets sliding left or right. It will be shown on your device.
Properties:
There are some properties of the card selector are:
- > cardsGap: This property is used to the gap size between cards.
- > lastCardSizeFactor: This property is used to render the last element’s factor compared to the first element.
- > mainCardWidth: This property is used to the width for the first element in the list.
- > onChanged: This property used to the callback to execute on card changed.
- > mainCardPadding: This property used to left padding of the first element in the list.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
card_selector:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 3: Import
import 'package:card_selector/card_selector.dart';
Step 4: Run flutter packages in your app’s root directory.
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 dummy json file and save it in the assets folder.
Create a List of the dynamic and give the name called _cards. Also, create a Map of the dynamic and give the name called _data.
List _cards;
Map _data;
Now, we will create initState(). Inside, we will add a json file and add a dynamic list of _cards is equal to the json decode. We will also map a _data equal to the dynamic list of _cards and wrap in setState().
@override
void initState() {
super.initState();
DefaultAssetBundle.of(context).loadString("assets/data.json").then((d) {
_cards = json.decode(d);
setState(() => _data = _cards[0]);
});
}
In the body, we will add a CardSelector(). Inside, we will add cards property means a list of dynamic _cards dot map navigate to CardPage() class. toList(). Also, we will add mainCardWidth means width of the first element of the list, mainCardHeight means height for the first element in the list, onChanged means the callback to execute on card changed. The index navigating to setState() and then navigating to _data is equal to the _cards of the index.
CardSelector(
cards: _cards.map((context) => CardPage(context)).toList(),
mainCardWidth: _width,
mainCardHeight: _width * 0.63,
mainCardPadding: -16.0,
onChanged: (i) => setState(() => _data = _cards[i])),
Now, we will deeply define CardPage() class.
In this class, we will return ClipRRect. Inside, add a container and add color from json file. His child property adds Stack() and inside add the image. We will add a column widget, Inside add card details like bank name, type, number, and branch. All data come from json file.
return ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
color: Color(_cardDetails['color']),
child: Stack(
children: <Widget>[
Image.asset(
'assets/${_cardDetails['background_layer']}.png',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
Padding(
padding: EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(_cardDetails['bank'], style: textTheme.title),
Text(_cardDetails['type'].toUpperCase(), style: textTheme.caption),
Expanded(child: Container()),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Expanded(
child: Text(_cardDetails['number'],
style: textTheme.subhead, overflow: TextOverflow.ellipsis),
),
Image.asset('assets/${_cardDetails['branch']}.png', width: 48.0)
],
)
],
),
),
],
),
),
);
Now, we will deeply define AmountPage() class.
This class will add to the home page. We will return ListView.builder(), inside add itemCount and itemBuilder. In itemBuilder, if the index is equal to zero, then return column widget. In this widget, add balance from json file. Also, we will add the amount, mode, time from json file.
return ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: (_amount['transactions'] as List).length + 1,
itemBuilder: (context, i) {
if (i == 0) {
return Padding(
padding: padding,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Balance', style: TextStyle(color: Colors.black)),
SizedBox(height: 8.0),
Text(_amount['balance'], style: textTheme.display1.apply(color: Colors.white)),
SizedBox(height: 24.0),
Text('Today', style: TextStyle(color: Colors.black)),
],
),
);
}
var transactions = _amount['transactions'][i - 1];
return Padding(
padding: padding,
child: Row(
children: <Widget>[
Icon(Icons.shopping_cart, size: 24.0, color: Colors.blueGrey[600]),
SizedBox(width: 16.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(transactions['mode'], style: textTheme.title.apply(color: Colors.white)),
Text(transactions['time'], style: textTheme.caption)
],
),
),
Text(transactions['amount'], style: textTheme.body2.apply(color: Colors.black))
],
),
);
},
);
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 'dart:convert';
import 'package:card_selector/card_selector.dart';
import 'package:flutter_card_selector_demo/amount_page.dart';
import 'package:flutter_card_selector_demo/card_page.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List _cards;
Map _data;
double _width = 0;
@override
void initState() {
super.initState();
DefaultAssetBundle.of(context).loadString("assets/data.json").then((d) {
_cards = json.decode(d);
setState(() => _data = _cards[0]);
});
}
@override
Widget build(BuildContext context) {
if (_cards == null) return Container();
if (_width <= 0) _width = MediaQuery.of(context).size.width - 40.0;
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
title: Text("Flutter Card Selector Demo"),
automaticallyImplyLeading: false,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(24.0),
child: Text(
"Wallets",
style: TextStyle(color: Colors.white,fontSize: 25)
),
),
SizedBox(height: 20.0),
CardSelector(
cards: _cards.map((context) => CardPage(context)).toList(),
mainCardWidth: _width,
mainCardHeight: _width * 0.63,
mainCardPadding: -16.0,
onChanged: (i) => setState(() => _data = _cards[i])),
SizedBox(height: 10.0),
Expanded(child: AmountPage(_data)),
],
),
);
}
}
Conclusion:
In the article, I have explained the Card Selector of basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Card Selector 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 Card Selector in your flutter projects. We will show you what the Introduction is?. Some card selector properties, make a demo program for working Card Selector and show a stacked card, animation, swiping cards left to right or right to left. Content will be change according to cards—a widget to select stacked widgets sliding left or right using the card_selector 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 Card Selector Demo:
flutter-devs/flutter_card_selector_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.
