How to give some space (margin/padding) between pages in PageView?

Question

I am using PageView.builder to create pages.

PageView.builder(
          itemCount: _pagesList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container( 
                    color: _pagesList[index],
                           );
                          }
                         )

What I currently have:

What I want:

ie I want to provide some Padding between pages (when they are being scrolled)

Reason: I will display Images in these pages, and since the Images will cover the full width of each page, it doesn't look nice when we scroll pages, since they are knitted together, like this:

How can I solve this?

Answer 1

PageController imagesController =
        PageController(initialPage: 0, viewportFraction: 1.1);

PageView(
    itemBuilder: (BuildContext context, int index) {
     return Padding(
      padding: EdgeInsets.only(left: 10, right: 10),
        child: Container( 
            color: _pagesList[index],
        ),
     );
  }
),

Answer 2

Best effort:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyPageView()
      )
    );
  }
}


class MyPageView extends StatefulWidget {
  MyPageView({Key key}) : super(key: key);

  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  @override
  Widget build(BuildContext context) {
    return PageView(
     children: <Widget>[
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.red,
        )
      ),
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.blue,
      ),
    ),
    Container(
      color: Colors.black,
      child: Card(
        color: Colors.green,
      ),
    ),

  ],
  );
  }
}

Answer 3

You just need to add some padding around each page and the width of the page view must be at least the 'card width + the padding from both sides'. This worked for me:

class MyWidget extends StatelessWidget {
  final _CARD_WIDTH = 220.0;
  final PageController _controller = PageController(initialPage: 0);
  
  @override
  Widget build(BuildContext context) {
    
    return Container(
            height: _CARD_WIDTH,
            width: _CARD_WIDTH + 32,
            child: PageView(
              scrollDirection: Axis.horizontal,
              controller: _controller,
              children: <Widget>[
                _buildImageCard("1"),
                _buildImageCard("2"),
                _buildImageCard("3"),
              ],
            ),
          );
  }
  
  Widget _buildImageCard(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 16.0, right: 16),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(15),
        ),
        width: _CARD_WIDTH,
        height: _CARD_WIDTH,
        child: Center(
          child: Text(text),
        ),
      ),
    );
  }
}

Answer 4

If you want to add padding and still have your pages as wide as the screen:

I needed this exact same thing, also for displaying images. I wanted to add padding but at the same time have each image take up the entire screen width. I figured I could use Fahad Javed's technique and tweaking it a little bit by calculating the viewPortFraction based on the screen width and padding.

@override
Widget build(BuildContext context) {
  double screenWidth = MediaQuery.of(context).size.width; // screen width
  double screenPad = 16.0; // screen padding for swiping between pages
  int _currentPosition = 0;

  return PageView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: data.length,
    controller: PageController(
        initialPage: _currentPosition,
        viewportFraction:
            1 + (screenPad * 2 / screenWidth)), // calculate viewPortFraction
    onPageChanged: (int value) {
      _currentPosition = value;
    },
    itemBuilder: (BuildContext context, int position) {
      return Padding(
        padding: EdgeInsets.only(left: screenPad, right: screenPad),
        child: Text('YOUR PAGE CONTENT'),
      );
    },
  );
}

Answer 5

this answer from enter link description here

final pageController = PageController(viewportFraction: 1.1);

PageView.builder(
  controller: pageController,
  itemCount: _pagesList.length,
  itemBuilder: (BuildContext context, int index) {
    return FractionallySizedBox(
      widthFactor: 1 / pageController.viewportFraction,
      child: Container(
       color: _pagesList[index],
      ),
    );
  },
);

Thanks @mono0926