How to make portrait rotate only one selected page in flutter (dispose doesn't work)

Question

i just start to write the application from flutter. I try to make portrait rotate only one selected page with the services package. I try to lock this page to be only portrait screen. Then, i try to make other page to be normal when i leave this page by using dispose. But it doesn't work. When i leave this page other page cannot rotate into landscape. How can i fix this problem?

 class DiaryDetail extends StatefulWidget {
  DiaryDetail({Key key}) : super(key: key);

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

class _DiaryDetailState extends State {
  double xOffset = 0; //set X axis and Y axis
  double yOffset = 0;
  double scaleFactor = 1;
  bool isDrawerOpen = false;
  @override
    void initState(){
      super.initState();
      SystemChrome.setPreferredOrientations([
       DeviceOrientation.portraitDown,
       DeviceOrientation.portraitUp,
    ]);
  }
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    var width = screenSize.width;
    var height = screenSize.height;
    return 
    AnimatedContainer(
      decoration: BoxDecoration(
        color: Color(0xff1a3c5a),
        borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0),
      ),
      transform: Matrix4.translationValues(xOffset, yOffset, 0)
        ..scale(scaleFactor),
      duration: Duration(milliseconds: 250),
      child: SafeArea(
        child:Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    isDrawerOpen
                        ? IconButton(
                            icon: Icon(
                              Icons.arrow_back_ios,
                              color: Color(0xffdac6a3),
                            ),
                            onPressed: () {
                              setState(
                                () {
                                  xOffset = 0;
                                  yOffset = 0;
                                  scaleFactor = 1;
                                  isDrawerOpen = false;
                                },
                              );
                            },
                          )
                        : IconButton(
                            icon: Icon(
                              Icons.menu,
                              color: Color(0xffdac6a3),
                            ),
                            onPressed: () {
                              setState(
                                () {
                                  xOffset = 230;
                                  yOffset = 150;
                                  scaleFactor = 0.6;
                                  isDrawerOpen = true;
                                },
                              );
                            },
                          ),
                    SizedBox(
                      width: 10,
                    ),
                    Text(
                      'My Diary',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 25.0,
                        letterSpacing: 1.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 5,
            ),
            
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(left: 3, right: 3,),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: isDrawerOpen
                        ? BorderRadius.circular(40)
                        : BorderRadius.only(
                            topLeft: Radius.circular(60),
                            topRight: Radius.circular(60),
                          ),
                  ),
                  child: Container(
                    child: DiaryCalenda(),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
  @override
dispose(){
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeRight,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();
}
}

user_13350694 · Answer

You can implement RouteAware (https://api.flutter.dev/flutter/widgets/RouteObserver-class.html) in the previous page and use didPopNext(), that way when you return to this screen, you can set the orientation again.

class _YourClassState extends State with RouteAware {

 @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  void didPopNext() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  }

  //the rest of your class

}

How to make portrait rotate only one selected page in flutter (dispose doesn't work)

1 Answers