VerticalCardPager not taking full width - flutter

Question

When using the VerticalCardPager on a page on its own, it works with no problems.
However, when using it beneath other widgets, the cards shrink in size. I have tried wrapping within a SingleChildScrollView to extend the page but this does not work with the Expanded/Flexible widget.
HomeScreen
import 'package:club2_app/widgets/vertical_card.dart';
import 'package:flutter/material.dart';
import '../widgets/news_card.dart';
import '../constants.dart';
import '../widgets/app_bar.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: buildAppBar(),
body: SafeArea(
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 10, top: 15),
child: Text(
"News",
style: TextStyle(
color: kPrimaryLightColor,
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
),
],
), // 'News'
NewsCard(),
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text(
'Posts',
style: TextStyle(
color: kPrimaryLightColor,
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
),
],
), // 'Posts'
Expanded(
child: Container(
padding: EdgeInsets.all(5.0),
width: double.infinity,
child: VerticalCard(),
),
)
],
),
),
);
}
}
VerticalCardWidget
import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';
class VerticalCard extends StatefulWidget {
#override
_VerticalCardState createState() => _VerticalCardState();
}
final List<String> titles = [
"How to Manage Injuries",
"Is Football Getting Faster?",
"Improving Match Fitness",
"Expected Goals: The Over and Under Achievers",
];
final List<Widget> images = [
Hero(
tag: "News 1",
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
width: double.infinity,
child: Image.asset(
"assets/images/Mbappe.jpeg",
fit: BoxFit.cover,
),
),
),
),
Hero(
tag: "News 2",
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
"assets/images/Mbappe.jpeg",
fit: BoxFit.cover,
),
),
),
Hero(
tag: "News 3",
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
"assets/images/Mbappe.jpeg",
fit: BoxFit.cover,
),
),
),
Hero(
tag: "News 4",
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
"assets/images/Mbappe.jpeg",
fit: BoxFit.cover,
),
),
),
];
class _VerticalCardState extends State<VerticalCard> {
#override
Widget build(BuildContext context) {
return VerticalCardPager(
titles: titles,
images: images,
onPageChanged: (page) {
// print(page);
},
);
}
}

Answer 1

I'm afraid it is a limitation of the VerticalCardPager.
The width and height of the cards inside a VerticalCardPager are defined based on the maxHeight of the Parent Widget:
double getWidth(maxHeight, i) {
double cardMaxWidth = maxHeight / 2;
return cardMaxWidth - 60 * (i - 2).abs();
}
double getHeight(maxHeight, i) {
double cardMaxHeight = maxHeight / 2;
if (i == 2) {
return cardMaxHeight;
} else if (i == 0 || i == 4) {
return cardMaxHeight - cardMaxHeight * (4 / 5) - 10;
} else
return cardMaxHeight - cardMaxHeight * (4 / 5);
}
}
For i == 2, the middle Card, the width and height are both equal to maxHeight / 2.
So, if you want the Cards to have a different aspect ratio and fill the width of the screen, you will have to modify the code of the VerticalCardPager.
However, if you want to keep the same aspect ratio and expand out of the screen. You can use a SingleChildScrollView as you mentioned. Here you go:
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Vertical Pager')),
body: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
[...]
SizedBox(
height: MediaQuery.of(context).size.height,
child: Container(
padding: EdgeInsets.all(5.0),
width: double.infinity,
child: VerticalCard(),
),
)
],
),
),
),
);
}
}
However, the scrolling behavior might be a little bit chaotic, or even impossible on some devices.

Answer 2

try to wrap Your column into container and set its width to "double.infinity"