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!

edenar · Answer 1 · 2020-06-03T14:54:37.580

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),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

Thanks man this is exactly the hint I needed. I'll make use of the animateToPage() or jumpToPage() functions and it should be fine. I'll try it tomorrow asap. — Simon Schork, Jun 03 '20 at 20:08

score 2 · Accepted Answer · answered Jun 06 '20 at 00:54

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),
              )
            ],
          )
        ],
      ),
    );
  }
}

Simon Schork · Answer 3 · 2020-06-05T10:02:24.770

I am still a little stuck. How do I pass the PageController between multiple screens, so I can call it's methods?

My current code:

main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WeinCheckerApp',
      home: PageViewScreen(),
    );
  }
}

class PageViewScreen extends StatefulWidget {
  @override
  _PageViewScreenState createState() => _PageViewScreenState();
}

class _PageViewScreenState extends State<PageViewScreen> {
  PageController _pageController = PageController(
    initialPage: 1,
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      appBar: AppBar(
        backgroundColor: Colors.red[900],
        title: Center(child: Text("WeinCheckerApp")),
      ),
      body: PageView(
        controller: _pageController,
        children: [
          SearchScreen(),
          ScanScreen(),
          FavScreen(),
        ],
      ),
    );
  }
}

ScanScreen.dart (one of 3 screens currently all the same):

class ScanScreen extends StatefulWidget {
  @override
  _ScanScreenState createState() => _ScanScreenState();
}

class _ScanScreenState extends State<ScanScreen> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return SafeArea(
      minimum: EdgeInsets.only(
        left: SizeConfig.safeBlockVertical,
        right: SizeConfig.safeBlockVertical,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Expanded(
                child: IconButton(
                  icon: Icon(Icons.search),
                  color: Colors.white,
                  onPressed: () => {},
                  iconSize: SizeConfig.safeBlockVertical * 5,
                ),
              ),
              Ink(
                decoration:
                    ShapeDecoration(shape: CircleBorder(), color: Colors.white),
                child: IconButton(
                  icon: Icon(Icons.camera_alt),
                  color: Colors.grey[800],
                  onPressed: () => print("ScanButtonPressed"),
                  iconSize: SizeConfig.safeBlockVertical * 6,
                ),
              ),
              Expanded(
                child: IconButton(
                  icon: Icon(Icons.star),
                  color: Colors.white,
                  onPressed: () => {},
                  iconSize: SizeConfig.safeBlockVertical * 5,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

The IconButtons shoud lead to the other screens.

Combine named Routes and PageView

3 Answers3