flutter PageView onPageChanged with setstate

Question

i am working with PageView but if i swipe to change it will change the page But if i put onPageChanged to setState for me to get to current index it will not change the page.

here is my code

int _indicatorsPages = 0;
final PageController controller = PageController(initialPage: 0);

change(int page) { setState(() { _indicatorsPages = page; }); }

code from build

Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          leading: Row(
            children: [
              SizedBox(
                width: 10,
              ),
              GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => SettingsFMC(),
                    ),
                  );
                },
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.5),
                        spreadRadius: 1, blurRadius: 2,
                        offset: Offset(0, 3), // i change position of shadow
                      ),
                    ],
                  ),
                  child: Center(
                      child: Icon(
                    FontAwesomeIcons.slidersH,
                    size: 20,
                    color: Colors.black,
                  )),
                ),
              ),
            ],
          ),
          elevation: 0,
          backgroundColor: Colors.transparent,
          actions: [
            GestureDetector(
              onTap: () async {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => Actitvities(),
                  ),
                );
                final doc = await firestore
                    .collection('feeds')
                    .doc(auth.currentUser.uid)
                    .collection('feedsItems')
                    .get();
                if (doc.docs.isNotEmpty) {
                  firestore
                      .collection('feeds')
                      .doc(auth.currentUser.uid)
                      .collection('feedsItems')
                      .get()
                      .then((value) {
                    value.docs.forEach((doc) {
                      doc.reference.update({'seen': true});
                    });
                  });
                }
              },
              child: Container(
                height: 40,
                width: 40,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 1, blurRadius: 2,
                      offset: Offset(0, 3), // i change position of shadow
                    ),
                  ],
                ),
                child: StreamBuilder(
                    stream: firestore
                        .collection('feeds')
                        .doc(auth.currentUser.uid)
                        .collection('feedsItems')
                        .where('seen', isEqualTo: false)
                        .snapshots(),
                    builder: (context, snapshot) {
                      if (snapshot.connectionState == ConnectionState.waiting) {
                        return Center(
                            child: Icon(
                          Icons.notifications_none_outlined,
                          size: 20,
                          color: Colors.black,
                        ));
                      }
                      if (snapshot.data.docs.isEmpty) {
                        return Center(
                            child: Icon(
                          Icons.notifications_none_outlined,
                          size: 20,
                          color: Colors.black,
                        ));
                      }
                      return Badge(
                        animationType: BadgeAnimationType.scale,
                        badgeContent: Text('${snapshot.data.docs.length}'),
                        position: BadgePosition.topStart(),
                        showBadge: true,
                        child: Center(
                            child: Icon(
                          Icons.notifications_none_outlined,
                          size: 20,
                          color: Colors.black,
                        )),
                      );
                    }),
              ),
            ),
            SizedBox(
              width: 10,
            ),
          ],
        ),
        extendBodyBehindAppBar: true,
        body: userProfileLoading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Stack(
                children: [
                  Container(
                    height: MediaQuery.of(context).size.height / 1.6,
                    child: StreamBuilder(
                        stream: firestore
                            .collection('Image')
                            .doc(widget.viewId)
                            .collection('Photos')
                            .orderBy('timestap', descending: false)
                            .snapshots(),
                        builder: (context, AsyncSnapshot snapshot) {
                          int idx = 0;
                          List<Widget> list = [];
                          if (snapshot.connectionState ==
                              ConnectionState.waiting) {
                            return Center(
                              child: CircularProgressIndicator(),
                            );
                          }
                          if (!snapshot.hasData) {
                            return Center(
                              child: Text("No image Found, Add images"),
                            );
                          } else {
                            if (snapshot.hasError) {
                              return Center(child: Text("fetch error"));
                            } else {
                              for (int i = 0;
                                  i < snapshot.data.docs.length;
                                  i++) {
                                //  print('the lent of the document is $idx');
                                list.add(
                                  FullScreenWidget(
                                    child: Hero(
                                      tag: "customTag",
                                      child: Image.network(
                                        snapshot.data.docs[idx]
                                            .data()['picture'],
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),
                                );
                                idx++;
                              }
                              return Stack(
                                children: [
                                  PageView(
                                    key: _key,
                                    scrollDirection: Axis.horizontal,
                                    controller: controller,
                                    onPageChanged: change,
                                    // onImageChange: (pre, current) {
                                    //   print('this current : $current');
                                    //   setState(() {
                                    //     indicatorsPages = current;
                                    //   });
                                    // },
                                    // boxFit: BoxFit.cover,
                                    // autoplay: false,
                                    // animationCurve: Curves.fastOutSlowIn,
                                    // animationDuration:
                                    //     Duration(milliseconds: 1000),

                                    // dotIncreasedColor: Colors.orange,
                                    // dotBgColor: Colors.transparent,
                                    // dotPosition: DotPosition.bottomCenter,
                                    // dotVerticalPadding:
                                    //     MediaQuery.of(context).size.height / 15,
                                    //showIndicator: false,
                                    // indicatorBgPadding: 7.0,
                                    children: list,
                                  ),
                                  Positioned(
                                    right:
                                        MediaQuery.of(context).size.width / 2,
                                    bottom: 75,
                                    child: Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(20),
                                            color: Colors.white),
                                        child: indicat.DotsIndicator(
                                          dotsCount: list.length,
                                          position: _indicatorsPages.toDouble(),
                                          decorator: DotsDecorator(
                                            color:
                                                Colors.grey, // Inactive color
                                            activeColor: Colors.black,
                                          ),
                                        )),
                                  )
                                ],
                              );
                            }
                          }
                        }),
                  ),

Answer 1

import 'package:flutter/material.dart';

class OnBoarding extends StatefulWidget {
  @override
  _OnBoardingState createState() => _OnBoardingState();
}

class _OnBoardingState extends State<OnBoarding> {
  PageController controller;
  int currentIndex = 0;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent[200],
      body: Stack(
        children: [
          PageView(
            onPageChanged: onchahged,
            controller: controller,
            children: [
              Container(
                child: Image.asset('assets/fierceninja.png'),
              ),
              Container(
                child: Image.asset('assets/ninja.png'),
              ),
              Container(
                child: Image.asset('assets/ninjahead.jpg'),
              ),
            ],
          ),
        ],
      ),
    );
  }
  onchahged(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

Here's a complete example.

Answer 2

You are wrong. When you use pageView, it will call the onPageChanged function after the page has changed. If you want to change page programmatically, you should use PageView.animateToPage() function.