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

Themes are used to share color, font, and design styles in your apps. Flutter provides us with a default theme when we use the MaterialApp. This theme has a light and dark version. Currently, it is set to the light theme. It has a primary color of blue as seen in the app bar, bottom navigation bar, and the floating action button. To see the dark version, update the MaterialApp to the following. And our app update to the default dark theme provided by Flutter. Let's talk about the settings we just added. In here, we set the theme and adapting properties to use the default light and dark theme provided by the MaterialApp. The theme data defines the color, font, and the overall styling of the MaterialApp. The theme mode is set to ThemeMode.dark. The theme mode is an enum used to hold different theme modes. Here we set it to use the dark mode by default. The default is ThemeMode.system, which sets the theme based on the user's device settings. Dark mode setting is available in Android 10 and iOS 13 devices and up. Let me show you how our app adapts to these. First comment out the theme mode since the default mode picks the device settings. And then, head over to your device settings, select Display, and enable dark mode by selecting the dark theme. For iOS devices, the dark mode setting is located in the display and brightness settings. Now let's head back to our app and you can see our app now uses the dark theme. The theme mode value can be toggled and managed as a feature in your app, but that's beyond the scope of this course. Now I'll go ahead and switch off the dark mode in the settings. Go ahead and do that too. Now that we have our app back to its original form, let's explore more features of a theme. To change the default light theme update your code to the following. Save your work. This sets the primary color to red and the secondary color to green. You can see the app bar takes the primary color and the floating action button takes the secondary color. The theme data class also gives you access to create themes specific to widgets like the app bar, text, card, floating action button, and others. And if you noticed, we declare a light theme variable to hold the theme data. We don't use the copy with methods to extend it and update the settings we want to change. This approach could be useful when we don't want to override the entire theme. Instead, we want the theme to have its original styling, while we just changed the paths we want. We can also change general styling in the lighting variable we just created. Let's focus on the text for the light theme for now. You can always do the same for the dark theme. We style texts with a texting property. Add the following code inside the theme data. This adds font styling for all the headline5 texts in our app. Note the font size of the headline5 text is 24 by default. I just added it here for demonstration purposes. To use this, go to the article_card.daft file and update the article card title to use this theme. Save your work. We don't get the expected results. And that's simply because we don't need to use the copy with method for the light theme. Also I'll show you a scenario where you'd need to use the copy with method. So let's head back to main.dart file and make the following updates. Save your work. Cool, the text is now styled as expected. Let's change the font size to 18 then do a hot restart. And you can see its updates to a font size of 18. I'll undo that and change it back to 24. So you can see the text with the font size of 24, still retains its size, but this time around it gets it from the theme for the styling of headline5. We use the Theme.of method to access the theme. This is a static member of the theme class that is used to get access to the closest theme above it in the widget tree. In this case, that would be the theme data we just defined in the MaterialApp above. With this set up, we can update our headline5 texts to a different font size, and the updates will reflect in our entire app just like I showed you earlier. Now, you can adapt the text style without having to write a new style. For instance, you want the headline text to have a different color or font size. For this, you use the copy with method of the text style class. This lets you extend the parent's theme. And this is a scenario where the copy with method would come in handy. Update your article cards title text to the following. This copy is the original headline5 styling and add a different color and italicizing the text. We'll be using more of text to made on the next episode, where we create the detail page. So you get to appreciate its benefits soon. I'll head over and comment this out. Finally, let's add a custom fonts to our app. We'll be using the later font from Google. Open up the pubspec.yaml file and scroll to the end. I have added a font section and specified the font files as assets of our app. Go ahead and add it if you haven't. And over here, I specified the bold and italic font files and added the correspondence settings for both the weights and the style. These is actual paths to where I start the file in our project. And you can see it inside the assets folder. To use this, add this font as a font family for the app. Head over to main.dart file and add the following line to the theme variable. Notes: This is going to change the font family for just the light theme. Now, if you try to add a font family to ThemeData.dark. It complaints that it doesn't have that property. To solve this, update your code to the following. Behind the scenes what ThemeData.dark actually does is, it returns a theme data that sets the brightness to Brightness.dark. And that's what we did here. And now we can set other properties of the theme data since we have direct access to it. Save your work and do a hot restart. And there you go, your app updates to use the little fonts.