Your Second Flutter App

Nov 30 2021 · Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 5: Meet Inherited Widgets

35. Use Portrait Mode

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 34. Lift State Up Next episode: 36. Conclusion

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Okay, the app is almost complete. We're going to make two small improvements to it. First, we've not handled landscape mode in our layouts, and there are some rendering errors when the device rotates. Now, one possible way to address that is to force the app to run only in portrait mode. And so, we're going to be doing that in this episode. We also want to let our user see the webpage for a course. And we'll use a package name, URL Launcher, to do that. To get started, open your project in progress or download the starter project for this episode. The first thing we want to do is lock our app into portrait mode. In the top level directory, open up RWCourses_app.dart. In the build method, add the following. We also need to update the info.plist for older iOS devices. Open up your project navigator, navigate into iOS, Runner, and then open up info.plist. If there is a landscape orientation under the UI Supported Interface Orientations, then make sure to delete them. Since we are targeting a phone, as opposed to a tablet, you can ignore the iPad configurations. Next up is to add a button to launch a course in a web browser from the courses page. We're going to use the URL Launcher package. Search for the URL Launcher in Flutter. Copy the installation instructions and paste them into the Visual Studio Code terminal. Once the package is downloaded and installed, open up course_details_page.dart. You can find it in the UI course Detail folders. First, import URL launcher. Then, add a private method to actually launch a course in a web browser. Now add a button that will launch the course. In the on pressed event, we will call our new launch course method. And that's all there is to it. Build and run your app, or hot reload. With your app up and running, go to the Course Detail page, click the View Course button. This will launch a web browser. Now you can play a video. Nice work.