inserting more data on start of scrollview on swiping top

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WrapHomePage(),
    );
  }
}

class WrapHomePage extends StatefulWidget {
  const WrapHomePage();

  @override
  _WrapHomePageState createState() => _WrapHomePageState();
}

class _WrapHomePageState extends State<WrapHomePage> {
  late List<Widget> _pages;
  List<Widget> _newPages = <Widget>[];

  // This points always to the mid-element in _list
  late int _initialIndex;

  // This should work with 3, 7, 11, ... odd elements. Mind the pattern!!!
  List<int> list = [-2, -1, 0, 1, 2];

  late PageController _controller;

  @override
  void initState() {
    super.initState();

    _pages = List.generate(list.length, (index) {
      final Key key = ValueKey(index);
      return Container(
        key: key,
        height: 50,
        color: index % 2 == 0 ? Colors.green : Colors.yellow,
        child: Text('Tile $index'),
      );
    });

    // Calculate mid.
    _initialIndex = (list.length / 2).floor();

    _controller =
        PageController(initialPage: _initialIndex, viewportFraction: 1);

    // This is where we listen to changes.
    _controller.addListener(() {
      // Get index according to the direction
      // _controller.page! > _initialIndex => swiping to the right, going to the left / previous element
      // _controller.page! < _initialIndex => swiping to the left, going to the right / next element
      final index = _controller.page! > _initialIndex
          ? _controller.page!.floor()
          : _controller.page!.ceil();

      if (index == _initialIndex) {
        return;
      }
      if (index == _initialIndex - 1) {
        _prev();
      } else if (index == _initialIndex + 1) {
        _next();
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  // Update _pages list when going next
  void _next() {
    setState(() {
      _pages.add(
        Container(
          height: 50,
          color: _pages.length % 2 == 0 ? Colors.green : Colors.yellow,
          child: Text('New Tile ${_pages.length}'),
        ),
      );
    });
  }

  // Update _newPages list when going previous
  void _prev() {
    setState(() {
      _newPages.add(
        Container(
          height: 50,
          color: _newPages.length % 2 == 0 ? Colors.green : Colors.yellow,
          child: Text('New Tile ${_newPages.length}'),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 100,
          child: CustomScrollView(
            center: ValueKey(0),
            controller: _controller,

            /// <-- Here...
            physics: PageScrollPhysics(),
            slivers: [
              SliverFillViewport(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return _newPages[index];
                  },
                  childCount: _newPages.length,
                ),
              ),
              SliverFillViewport(
                key: ValueKey(0),

                /// <-- and here...
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return _pages[index];
                  },
                  childCount: _pages.length,
                ),
              ),
            ],
          ),
        ),
      ),
      persistentFooterButtons: [
        FloatingActionButton(
          child: Text('B'),
          onPressed: () {
            setState(() {
              _newPages.add(
                Container(
                  height: 50,
                  color:
                      _newPages.length % 2 == 0 ? Colors.green : Colors.yellow,
                  child: Text('New Tile ${_newPages.length}'),
                ),
              );
            });
          },
        ),
        FloatingActionButton(
          child: Text('E'),
          onPressed: () {
            setState(() {
              _pages.add(
                Container(
                  height: 50,
                  color: _pages.length % 2 == 0 ? Colors.green : Colors.yellow,
                  child: Text('New Tile ${_pages.length}'),
                ),
              );
            });
          },
        ),
      ],
    );
  }
}