Portrait/Landscape per screen in flutter app

Question

Building a flutter app. I want one page to display in landscape, and the rest of the app to display in portrait. I can make that happen using techniques that I've found here and elsewhere, but it doesn't work very well. On initially entering the landscape screen, there's a kind of "shudder" while the app seems to be figuring out what to do. Then it displays ok. But on going back, the original screen first is displayed in landscape for a considerable time (nearly a second), and then there's another "shudder" before the screen is displayed in portrait. Simplified main.dart below. What am I doing wrong?

---

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class ScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('screen one'),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: Text('some text'),
          ),
          RaisedButton(
            child: Text('Go to screen two'),
            onPressed: () {
              Navigator.pushNamed(
                context,
                'screenTwo',
              );
            },
          )
        ],
      ),
    );
  }
}

class ScreenTwo extends StatefulWidget {
  @override
  _ScreenTwoState createState() => _ScreenTwoState();
}

class _ScreenTwoState extends State<ScreenTwo> {
  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (MediaQuery.of(context).orientation != null) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeLeft,
      ]);
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('screen two'),
      ),
      body: Center(
        child: Text('other text'),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScreenOne(),
      routes: {
        'screenTwo': (ctx) => ScreenTwo(),
      },
    );
  }
}

Solution

Modify your second screen like this

return WillPopScope(
      onWillPop: () {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
        ]);
        Navigator.of(context).pop();
        //we need to return a future
        return Future.value(false);
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('screen two'),
        ),
        body: Center(
          child: Text('other text'),
        ),
      ),
    );

Comments

[Abhishek Ghaskata]

why you are checking null ? I think it should be DeviceOrientation.portraitUp or DeviceOrientation.portraitDown

[Bill C]

The null check was in an example that I found. Doesn’t change the behavior to leave it out. I want screen two to be displayed landscape, screen one portrait.

[Bill C]

Thanks, jitsm555. That gets very close. However, I've noticed a couple of problems. 1) I still see the "shuddering" effect navigating in both directions. This happens on only some Android emulators; it might be associated with API level R? Is it possible to eliminate it? More importantly, 2) on some phones (not on any emulators AFAIK), sometimes, the first screen is still rendered very briefly in landscape before being rendered correctly. This seems like it shouldn't be possible - the setPreferredOrientations happens before the pop. It's acting like a race condition - a possible flutter bug??

[Jitesh Mohite]

It seems like a possible flutter bug.