Your Second Flutter App

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

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

The course details page consists of three sections, a banner at the top with the course image, a main section with the course title and description, and then a section with some course details. In the details, you'll list the course difficulty. The data coming back from the API is lower case, so you'll take the opportunity to write an extension on the String class, with a method to capitalize a string, since that's missing from the String classes itself. Open the project in progress, or download and open the starter project. In the lib folder, create a folder called utils. Next, create a file called string_extensions.dart. Add an extension on the String class called StringExtension. Add a capitalized method to the extension, which makes the first letter uppercase, then extracts the rest of the string using substring. Now open course_details_page.dart. You can find it in the ui courses folders. We're going to use the image container we built in the previous episode. Before we can use it, we first must import some files. Now we are going to create several methods that will build out the course details page. First, let's build our banner that contains our image container. By not specifying a width on the image container, it will take up the full width of the screen. Now, add a buildMain helper method to show the course title and description in text widgets. Finally, add a buildDetails method to show the course domains, difficulty, and contributors. The difficulty level has been capitalized using the string extension. Okay, now to put it all to work. Update the build method to call the helpers. And that's it. Build and run or hot reload your app. Tap on one of the courses, and this time you have a nicely formatted course page.