Flutter PageView: Can I make pages Overlap?

Question

Hi there I have the following problem,

I want to make a PageView where Element sort of overlap from Page to Page.

(I think there are two ways to make that happen: overlap the pages themselves, overlap the children from one page on another page)

So far I can make a child of a Page overlap its parent, however when the Page leaves the screen its overlapping children are no longer drawn on the screen.

[The page offscreen does not render its children. How can I make that happen?] (To make the overlap happen so far I used Transform.translate)

How can I make this overlap happen and ensure that the Elements are built?

Answer 1

The simple workaround to achieve this is by:

1. Create page view with container and set width to screen width using MediaQuery.of(context).size.width
2. Put each page in a Row
3. Wrap Row with SingleChildScrollView and set its:
   • scrollDirection to Axis.horizontal
   • physics to PageScrollPhysics()

And this is the example code to demonstrate the result:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double screenWidth = size.width;

    return MaterialApp(
      home: Scaffold(
        body: Container(
          height: 200,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            physics: PageScrollPhysics(),
            child: Row(
              children: [
                Container(
                  width: screenWidth,
                  decoration: BoxDecoration(
                    border: Border.all(),
                  ),
                  child: Transform.translate(
                    offset: Offset(screenWidth/2, 0),
                    child: Center(
                      child: Text(
                        'First Page',
                      ),
                    ),
                  ),
                ),
                Container(
                  width: screenWidth,
                  decoration: BoxDecoration(
                    border: Border.all(),
                  ),
                  child: Center(
                    child: Text(
                      'First Page',
                    ),
                  ),
                ),
                Container(
                  width: screenWidth,
                  decoration: BoxDecoration(
                    border: Border.all(),
                  ),
                  child: Center(
                    child: Text(
                      'First Page',
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

*the code above is runnable in dartpad

And this is the demo result:

Hopefully it can solve your problem, Thanks