Question 137153 in Flutter Question posted in
The official Flutter documentation can be found here.

Is there any way to implement both side pagination in Flutter using PageView?

I can paginate forward without a problem, but I can’t paginate in the opposite direction.
I have pageview with weeks and want to upload new weeks on user’s scroll
enter image description here

Can anyone suggest, provide a link to the source, please?

Tags:

3

Answers


  1. 0 
    class MyPageView extends StatefulWidget {
  @override
  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  final PageController _controller = PageController(
    viewportFraction: 0.8, // set viewportFraction to 0.8 to show partial pages on the sides
  );

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr, // change to TextDirection.rtl for right-to-left scrolling
      child: PageView.builder(
        controller: _controller,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 10.0),
            child: Center(
              child: Text(
                'Page ${index + 1}',
                style: TextStyle(fontSize: 24.0),
              ),
            ),
          );
        },
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    You can use a PageController with a large initialPage, then take care of the offset in itemBuilder

    
class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late PageController _controller;
  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 1000);
  }

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

  currentWeek() {
    return DateTime.now().difference(DateTime(DateTime.now().year)).inDays ~/ 7;
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _controller,
      itemBuilder: (context, index) {
        return Center(
          child: Container(
            height: 300,
            width: 300,
            color: Colors.purple,
            child: Center(
              child: Text(
                "Week ${currentWeek() + index - 1000}",
                style: const TextStyle(fontSize: 30, color: Colors.white),
              ),
            ),
          ),
        );
      },
    );
  }
}
    Login or Signup to reply.
  3. 0

    When using PageView as a widget you have a property named controller, you can attach a controller and then paginate to any side using nextPage() and previousPage() methods like this:

    class _MyPageView extends State<MyPageView> {
  late final PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

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

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: pageController,
    );
  }

  _moveNextPage() {
    pageController.nextPage(duration: const Duration(milliseconds: 200), curve: Curves.linear);
  }

  _movePreviousPage() {
    pageController.previousPage(duration: const Duration(milliseconds: 200), curve: Curves.linear);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search