Flutter UI Widgets

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

Let's replace the Placeholder widget with an image. To do this, enter the following code. A size box is used to constrain the underline image to a height of 200 and a width of double.infinity. The width of double.infinity simply tells Flutter that a child should take up the entire available width. Also, we use the SizedBox instead of a container because we don't intend painting or positioning the widget. We just need to size the underline child correctly. The imageURL is passed as the first argument of the Image.network widgets. Next, the fit property is set to BoxFit.cover which makes the image cover the entire widget without distorting it's aspect ratio. Note: Image.network is just one of the many constructors of the image widgets. It provides a simpler API for displaying images, gotten from an online source. Flutter downloads the image and caches it. Save your work. And we have an exception. And it seems like we didn't pass the imageURL to the cut banner widgets. So, let's do that now. And the image displays correctly. Let's swap the article to another one with an image that fills up the banner. I want to check if the styling is correct. Now, look closely at the top edges of the image. Notice that the image doesn't have the rounded corner that the underline card widget has. So add the bottom radius at the top corners. We'll be using the ClipRrect widgets. This widget, clips its child using a rounded rectangle. Now, wrap the SizedBox with this widget and update it like so. In here we use, BorderRadius.only constructor to specify the border radius for only the top left and top right corners. The other corners would be right angled. Now, save your work and see the changes. Cool. The image now has a border radius. And that's when images can take some time to load. To display some widgets, while the image is downloading, the image widget provides us with a loadingBuilder property. It is a callback function that will be called repeatedly until the image is loaded. To use this, paste in the following code. It shows a CircularProgressIndicator by default. Then if the image is done downloading, shows the image. When an image is downloading, the progress value is continuously updated. And when the download is complete, the value becomes null. Save your work and do a hot restart to remount the widgets. You can see the loading indicator is shown while the image is downloading. And once it's done, the image is displayed. Finally, let's replace the title of the up-button image. Head above to the up-button in the main page of that file and add in the following code. This uses the Image.asset constructor. Image.assets is used to add images that have bonded with your app. Asset is simply Flutter's way of managing resources. This could be stuff like images, icons, fonts, and other files you're able to use. The path of the asset is added and the image is given width of 180. Save your work. If you look out at the debug toolbar, you'd notice that the debug session has broken. This is because an exception must have occurred since we haven't configured the assets directory for our app. Android developers would store this type of file in rest/Gradle folders. While iOS developers, would store theirs in images, that's xcassets folder. Flutter apps have only assets to store bot resources, images, and any other file you're able to you use. This code would not work yet. We need to specify the assets folder for our app. Go ahead and open up the pubspec.yaml file in your project directory. This is the equivalent of a Gradle build script or a pub file in Android and iOS respectively. Flutter gives you access to those types of files inside the Android and iOS folder in your projects. But those are for native packages that would rely solely on Android and iOS. For Flutter you do all this type of configurations inside the pubspec.yaml file. Now, add the following lines in the flutter section below. This adds the images folder as an assets to our application. Note: The assets folder has already been added to the startup project for this episode. And it contains the images folder, which has a logo. We can also specify to add only a single file, but this set up adds the entire folder. Save the file. Now, whenever the pubspec.yaml file is updated. The pub gets command, runs to send the app correctly with all its dependencies. Once that is done, you do a hot restart. The exception is gone and the logo displays as expected.