I am developing on boarding screens. Flutter's pageview is not taking full available width. I tried container's and sizedBox's width to double.maxFinite etc. But nothing is working for me. In the picture you can see red area is occupied by PageView. I am not using padding left, start or horizontal padding in my code. But it is automatically getting padding from left side. Also a prt of text is showing on 1st page which is actually located on second page. Means part to second index is showing on the right side of first index. My Code is below
return Scaffold(
body: Container(
color: Colors.blue,
//padding: const EdgeInsets.only(bottom: 80),
child: PageView(
controller: _controller,
pageSnapping: false,
children: [
BoardingItem(item: items[0]),
BoardingItem(item: items[1]),
BoardingItem(item: items[2]),
],
),
),
And Boarding Item is defined in another widget:
class _BoardingItemState extends State<BoardingItem> {
@override
Widget build(BuildContext context) {
return Container( color: Colors.red,
child: Column(
children: [
Image.asset(
widget.item['image']!,
width: double.maxFinite,
height: 250,
fit: BoxFit.fill,
),
const SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(
widget.item['title']!,
style: const TextStyle(
fontSize: 24,
fontFamily: "Anton",
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 10),
SizedBox(width: double.maxFinite,
child: Text(
widget.item['description']!,
style:
const TextStyle(fontSize: 14, color: Colors.grey),
),
),
],
),
);
output image
I was using Page Controller with viewPortFraction : 0.8
PageController(viewportFraction: 0.8, keepPage: true);
ViewportFraction was the issue, That's why it was taking the 80 percent of the available width and thus a part of next index was showing on the same page. When i set viewPortFraction to 1, My issue was resolved.
PageController(viewportFraction: 1, keepPage: true);