flutterpaginationflutter-pageviewpageviews

PageView is not taking full width of screen


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


Solution

  • 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);