Combine named Routes and PageView

Question

I'm fairly new to flutter and building my first real app. I implemented a router class and generating named routes from icon buttons for navigation. Next step I want to also switch between the 3 screens by swiping.

My structure is:

main.dart (returns MaterialApp)  
FirstScreen.dart (returns Scaffold)  
SecondScreen.dart (returns Scaffold)  
ThirdScreen.dart (returns Scaffold)

I tried to implement the swipe feature by adding a Pageview widget to the main.dart, but when I switch to navigating with the IconButtons and change to another screen the swipe feature won't work anymore. I guess the problem is clear since I'm not on main.dart anymore it won't load the PageView. But I'm lacking a clean way to integrate both features.

Very glad for every help I can get, thanks in advance!

Solution 1

You can just pass the pagecontroller. Here is the same example but with your question.

class SamplePageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(initialPage: 0);
    return PageView(
      controller: pageController,
      children: [
        First(pageController: pageController),
        Second(pageController: pageController),
        Third(pageController: pageController),
      ],
    );
  }
}

class Third extends StatelessWidget {
  const Third({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Third page'),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                color: Colors.yellow,
                child: Text('Previous'),
                onPressed: () => pageController.previousPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              ),
            ],
          )
        ],
      ),
    );
  }
}

class Second extends StatelessWidget {
  const Second({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('Second page'),
          Row(
            children: [
              FlatButton(
                color: Colors.yellow,
                child: Text('Previous'),
                onPressed: () => pageController.previousPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              ),
              FlatButton(
                color: Colors.orange,
                child: Text('Next'),
                onPressed: () => pageController.nextPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              )
            ],
          )
        ],
      ),
    );
  }
}

class First extends StatelessWidget {
  const First({
    Key key,
    @required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text('First page'),
          Row(
            children: [
              FlatButton(
                color: Colors.orange,
                child: Text('Next'),
                onPressed: () => pageController.nextPage(
                    duration: Duration(milliseconds: 100), curve: Curves.ease),
              )
            ],
          )
        ],
      ),
    );
  }
}

Solution 2

Do you really need to use named routes for navigation?

If not, then you can just add a PageController for your PageView and make use of nextPage/previousPage functions in your IconButtons. This is just a crude example of navigating via PageController.

class SamplePageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    PageController pageController = PageController(initialPage: 0);
    return PageView(
      controller: pageController,
      children: [
        Container(
          child: Column(
            children: [
              Text('First page'),
              Row(
                children: [
                  FlatButton(
                    color: Colors.orange,
                    child: Text('Next'),
                    onPressed: () => pageController.nextPage(
                        duration: Duration(milliseconds: 100),
                        curve: Curves.ease),
                  )
                ],
              )
            ],
          ),
        ),
        Container(
          child: Column(
            children: [
              Text('Second page'),
              Row(
                children: [
                  FlatButton(
                    color: Colors.yellow,
                    child: Text('Previous'),
                    onPressed: () => pageController.previousPage(
                        duration: Duration(milliseconds: 100),
                        curve: Curves.ease),
                  ),
                  FlatButton(
                    color: Colors.orange,
                    child: Text('Next'),
                    onPressed: () => pageController.nextPage(
                        duration: Duration(milliseconds: 100),
                        curve: Curves.ease),
                  )
                ],
              )
            ],
          ),
        ),
        Container(
          child: Column(
            children: [
              Text('Third page'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FlatButton(
                    color: Colors.yellow,
                    child: Text('Previous'),
                    onPressed: () => pageController.previousPage(
                        duration: Duration(milliseconds: 100),
                        curve: Curves.ease),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}