Overview
Today we take a look at vertical page library and make a seasons app using it and Flutter
Source Code
import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
class VerticalCards extends StatefulWidget {
const VerticalCards({Key? key}) : super(key: key);
@override
_VerticalCardsState createState() => _VerticalCardsState();
}
class _VerticalCardsState extends State<VerticalCards> {
final List<Widget> images = [
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://images.unsplash.com/photo-1590273466070-40c466b4432d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
fit: BoxFit.cover,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
fit: BoxFit.cover,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
fit: BoxFit.cover,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://images.unsplash.com/photo-1518873890627-d4b177c06e51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
fit: BoxFit.cover,
),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFFFE4DD),
appBar: AppBar(
title: const Text(
"Seasons",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 28, color: Colors.black),
),
shadowColor: Colors.transparent,
backgroundColor: Color(0xFFFFFE4DD),
),
body: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: VerticalCardPager(titles: ["", "", "", ""], images: images),
),
);
}
}
