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

how to change the display order of pageview pages – Flutter

And that I want to change the display order of a page according to the user’s action. If he clicks on button 1, the red page is displayed first, if he clicks on button 2, the yellow page is displayed first.

How can I change the order of the pages?

would it be correct for me to use pageview.builder?

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

  @override
  State<PageViewTest> createState() => _PageViewTestState();
}

class _PageViewTestState extends State<PageViewTest> {
  final _pageController = PageController();
  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _pageController,
      children: [
        Column(
          children: [
            TextButton(
                onPressed: () {
                  //show container red with next page
                },
                child: const Text("Button 1")),
            TextButton(
                onPressed: () {
                  //show container yellow next page
                },
                child: const Text("Button 2")),
          ],
        ),
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.yellow,
        ),
      ],
    );
  }
}
Tags:

2

Answers


  1. 0

    You can use PageView.builder or normal PageView both will work.

    As for the changing of pages you should use the PageController passed into your PageView and call _pageController.animateToPage(pageNumber) or _pageController.jumpToPage(pageNumber), if you don’t want animation,in your button.

    Login or Signup to reply.
  2. 0

    Try this way,

    class PageViewTest extends StatefulWidget {
  const PageViewTest({Key? key}) : super(key: key);

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

class _PageViewTestState extends State<PageViewTest> {
  final _pageController = PageController();
  int _currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      itemCount: 2,
      itemBuilder: (BuildContext context, int index) {
        switch (index) {
          case 0:
            return Column(
              children: [
                TextButton(
                  onPressed: () {
                    setState(() {
                      _currentPageIndex = 1;
                    });
                  },
                  child: const Text("Button 1"),
                ),
                TextButton(
                  onPressed: () {
                    setState(() {
                      _currentPageIndex = 2;
                    });
                  },
                  child: const Text("Button 2"),
                ),
              ],
            );
          case 1:
            return Container(
              color: Colors.red,
            );
          case 2:
            return Container(
              color: Colors.yellow,
            );
          default:
            return Container();
        }
      },
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search