Previous episode: 18. Create a Custom Image Widget
Next episode: 20. Challenge: Add a Filter Screen
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.
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.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.