Search code examples
flutterflutter-layoutflutter-pageview

How do I set the initial page of PageView in Flutter?


I have a PageView with four pages in it. I want to start on the third page. That means there are two pages available when the user scrolls up and one page when the user scrolls down.

I tried:

home: PageView(
   controller: MyPageController(),
   children: [Page1(), Page2(), Page3(), Page4()],
   scrollDirection: Axis.vertical,
),

With:

class MyPageController extends PageController {
   @override
   int get initialPage => 3;
}

Unfortunately, that doesn't help me.


Solution

  • PageController constructor has named parameter initialPage. You can use it, just create the controller somewhere outside of build function:

    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      PageController controller;
    
      @override
      void initState() {
        super.initState();
        controller = PageController(initialPage: 3);
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: PageView(
                controller: controller,
                children: [
                  for (var i = 0; i < 4; i++)
                    Text('test $i')
                ],
                scrollDirection: Axis.vertical,
              )
            )
          ),
        );
      }
    }