PageView with horizontal, non-filled children

Question

It appears that PageView will always fill according to the axis of the scrolling. What would be the best approach to cater for "peeking" in a PageView?

I tried implementing a PageView.custom with the standard SliverChildListDelegate but I'm guessing that doesn't allow for arbitrary / custom sizing. I was going to start doing something custom but decided asking here is a good first start.

See the image below for an example of what I'm trying to achieve.

Answer 1

This feature is added in 3 Mar 2017. After @EricSeidel's request.

This can achieve by controller property of PageView.

controller: PageController(
  initialPage: 1,
  viewportFraction: 0.8,
),

PageController.viewportFraction to peek previous and next. PageController.initialPage to display middle page when app is launched.

import 'package:flutter/material.dart';

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

class LimeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lime',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.symmetric(
          vertical: 50.0,
        ),
        child: PageView(
          controller: PageController(
            initialPage: 1,
            viewportFraction: 0.8,
          ),
          children: [
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.redAccent),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.purpleAccent),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0,), color: Colors.greenAccent)
          ],
        ),
      ),
    );
  }
}

I couldn't figure out a better way to add margin between pages and how to avoid space after last and start page.

Answer 2

My understanding is that this is not possible with the current PageView, I've turned this into an issue: https://github.com/flutter/flutter/issues/8408