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

So far, we've built our app with Material build widgets. Our app would look great on both Android and iOS, simply because Material widgets have been adapted for both platforms. We can view how our app would look and feel on different platforms. First, let's take note of the default Android behavior. Currently, the AppBar title is at the left side of the AppBar. Also, when you scroll past the list view items, you get an overflow glow which matches your theme color. Let's see the iOS behavior. Go to main.dart file and set the platform to iOS inside the light Theme data. You would notice some changes. First, the position of the AppBar title moves to the middle for iOS. Let's scroll past the list view. And you can see a bouncing scroll effect. Another change is the route transition. Click on the article card, and you can see the detail page slides in from the right. Click the back button on the Sliver AppBar to go back to the previous page. Comment out the platform code to take it back to the default platform, which is Android in my case. Back in our app, click on the article card once more. And you can see a different route transition for Android-based devices. So you see, Material widgets adapt well on both platforms. But Flutter provides us with Cupertino widgets that follows iOS design guidelines. We have covered the call when it comes to UI widgets, but there are some Cupertino widgets worth mentioning. To work with Cupertino widgets, you could use the Cupertino app. But we won't be using it because of two main reasons. First, we'll still use some Material components, and some of them rely on values passed down from the Material app. The absence of a Material ancestor could lead to some errors. Secondly, the Cupertino app has lesser properties, like the absence of the dark theme configuration. Head over to the main page widget. There are two variations of the scaffold we get for Cupertino. We have the Cupertino page scaffold and the Cupertino tab scaffold. Cupertino page scaffold is just a plain old scaffold that accepts a navigation bar and a child. While the Cupertino tab scaffold comes bundled with tab features. We'll be using both for our example. Now, replace the main page widget with the following code. First, we import Cupertino for its widgets to work. We also import Material because we are going to be using some Material-based widgets. Now inside the main page widget, we return Material widget as the root. This step is necessary if you want to use a Material-specific widget down the widget tree. We define the Cupertino tab scaffold and set its item to a list of bottom navigation bar item, just like we did for the bottom navigation bar we created previously. We give it the Cupertino specific color of systemGrey5, which is a light gray color that conforms to the iOS design guideline. For the icons, Cupertino icons are used. The Cupertino icon package is already included in the pubspec.yaml file of every Flutter starter app. We also passed in the tab builder callback function, and this will be called whenever the tab becomes active. The switch statement determines which view would be shown based on the tab index. Note, tab contents are cached automatically whenever the tab becomes inactive. Cupertino tab views are returned as the views, and they're responsible for creating the content of the tabs. In this case, that would be the homepage and the inbox page. Go ahead and save your work. And as you can see, the tabs updates with the corresponding views. But notice, we don't have an AppBar. We could use the Cupertino page scaffold for this. Go to the main page and inbox page widget and wrap them with this widget. And now head back to the homepage widget. We can see the AppBar. In here, we use the Cupertino page scaffold widget. I'm passing the Cupertino navigation bar. We set its middle property to the image asset which is our logo, and if you notice, we are using the dark version of the logo already provided in this project. The trailing property is an icon button that we would use to navigate the create article page later on. Let's navigate to the inbox page. We can also see that we have the logo and the nav bar displayed. Let's work on the article card to make it have an iOS feel. Update the build method of the article card to the following. In here, we added a new member called isIOS. This is a boolean that would determine if we want to create an iOS-styled card. And we set its default values to true. And the build method, we simply have a condition to check if this boolean value is true. And if it is true, we return the container with the bottom border as the iOS-styled card. And this version of the card will be a container instead of a card. We use the container to give it a flat design. Go ahead and save your work. And you can see the updated styling. In a future episode, I'll show you how to get the underlined platform. And I know you can see the overflow error. Don't worry about that for now. We'll solve this later on. Finally, let's replace the Android circular spinner with its Cupertino counterpart. Head over to the homepage widget, and scroll to the circular progress indicator and replace it with the following code. This is the Cupertino Activity Indicator, which is an iOS-styled activity indicator. Save your work and do a hot restart. And there you have it, our app now has an iOS feel. Now to fix the overflow error, head over to the card detail widget in the article card file. Then remove the spacer widget. After that, wrap the article source text with the flexible widget. You can see that it takes flex to the next line. But we want it on one line. So add the overflow property and set it to show an ellipsis. And finally, for the very last time, to add back the spaces in between the children of the row, set the main access alignment to spaceBetween. Save your work, and the UI is now fixed.