Your Second Flutter App

Ok, the app is almost complete. We’re going to make two small improvements.

We’ve not handled landscape mode in our layouts, and there are some rendering errors when the device rotates. One possible way to address that is to force the app to run only in portrait mode, and we’ll do that in this episode.

We also want to let our user see the web page for a course, and we’ll use a package named url_launcher to do that.

To get started, open your project in progress or download the starter project for this episode. The first thing that 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:

Widget build(BuildContext context) {
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

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 are landscape orientations under the UISupportedInterfaceOrientation, then make sure to delete them.

		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>

We can leave the iPad configurations since we’re only targeting phone devices. Keep in mind if you were to support the iPad, you would need to support landscape more although in such a case, you’d use a different layout.

Next up is to add a button to launch a course in a web browser from the course page. We’re going to use the url launcher package. Search for url launcher in flutter. Copy the installation instructions and paste into Visual Studio terminal.

flutter pub add url_launcher

Once the package is downloaded and installed, open course_detail_page.dart. You can find it in the ui course_detail folders. First import url_launcher.

import 'package:url_launcher/url_launcher.dart';

Then add a private method to actually launch a course in a web browser.

void _launchCourse(String courseId) {
  launch("https://raywenderlich.com/$courseId");
}

Now add a button that will launch the course. In the onPressed event, we will call our new launch course method.

children: <Widget>[
  _buildBanner(),
  _buildMain(context),
  _buildDetails(context),
  TextButton(
    child: const Text('View Course'),
    onPressed: () => _launchCourse(course.courseId),
  ),
],

And that’s all there is to it. Build and run your app or hot reload. With your app up and running, go to a course detail page. click ViewCourse button. This will launch a web browser with the course page on it. Now you can play a video. Nice work!