Cards Stack View in Flutter App

This articles explains you how to create cards stack with vertical carousel in flutter applications. You can also check out flutter card view related articles.

To create carousel view in vertical direction for cards stack, we are using stacked_card_carousel flutter package. In this flutter example, we are displaying football players of popular manchester united club in stacked cards carousel. So we will create card UI with football player image, name and playing position.

StackedCardCarousel widget has many properties like initialOffset, items, spaceBetweenItems, applyTextScaleFactor etc. initialOffset property is used to set initial vertical offset for cards. items attribute is used to display list of stacked card widgets.

spaceBetweenItems property is used to set vertical space between stacked card widgets. applyTextScaleFactor is used to scales up space and position for stacked card widget. first we need to add stacked_card_carousel flutter package in our pubspec.yaml files.

 

Add required dependency in your pubspec.yaml file

stacked_card_carousel: ^0.0.2+1
 
 

Set images path in pubspec.yaml file

First we need to add images in folder named ‘images’ in root directory and add their paths in pubspec file as below. So we can display images in cards stack carousel view.

assets:
– images/ronaldo.png
– images/daviddegea.png
– images/pogba.png
– images/varane.png
– images/maguire.png
– images/fernandes.png
– images/sancho.png
 
 

Create Card UI

import ‘package:flutter/material.dart’;

class MyCardUI extends StatelessWidget {

final Image image;
final String name;
final String position;

const MyCardUI({
Key key,
this.image,
this.name,
this.position
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(15),
child: Column(
children: <Widget>[
Container(
    width: MediaQuery.of(context).size.width*0.6,
    height: MediaQuery.of(context).size.width*0.5,
    child: image,
),
SizedBox(height: 8),
Text( name, style: TextStyle(color: Colors.deepOrange,fontSize: 24,fontWeight: FontWeight.bold)),
SizedBox(height: 12),
Text(position, style: TextStyle(color: Colors.grey,fontSize: 20,fontWeight: FontWeight.bold)),
],
),
),
);
}
}

 
 

Add cards for stack in array

final List<Widget> listCardsWidgets = [
MyCardUI(
    image: Image.asset(“images/ronaldo.png”),
    name: “Cristiano Ronaldo”,
    position: “Centre Forward”,
),
MyCardUI(
    image: Image.asset(“images/fernandes.png”),
    name: “Bruno Fernandes”,
    position: “Attacking Midfield”,
),
MyCardUI(
    image: Image.asset(“images/sancho.png”),
    name: “Jadon Sancho”,
    position: “Right Winger”,
),
MyCardUI(
    image: Image.asset(“images/pogba.png”),
    name: “Paul Pogba”,
    position: “Central Midfield”,
),
MyCardUI(
    image: Image.asset(“images/maguire.png”),
    name: “Harry Maguire”,
    position: “Centre Back”,
),
MyCardUI(
    image: Image.asset(“images/varane.png”),
    name: “RaphaĆ«l Varane”,
    position: “Centre Back”,
),
MyCardUI(
    image: Image.asset(“images/daviddegea.png”),
    name: “David de Gea”,
    position: “Goalkeeper”,
),
];
 
 

Cards Stack Carousel View

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Cards Stack Sample’)),
body: StackedCardCarousel(
    initialOffset: 30,
    spaceBetweenItems:300 ,
    items: listCardsWidgets,
));
}
 
 
cards stack
 
 
 
cards stack
 

One thought on “Cards Stack View in Flutter App

Leave a Reply