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

In previous episodes, we use the floating action button to add an unpress interaction. Flutter provides us with some widgets that lets us build interactivity into any widgets. We'll be using a gesture detector widgets to do this. This widget detects different types of gestures from a user like a tap, drag, long press and many others. Open up the home_page.dart file. scroll down to the list view section and wrap the article card with these widgets and update it like so First, we create an article variable to hold the snapshot data for each index of the list view item. We do this, since we'll be using the snapshot data in multiple places. Then we wrapped the article card with a gesture detector and implemented it's on top callback function. This function will be called whenever the widget is tapped. Inside this function, we add the code for navigating to a different page. In Flutter, app screens or pages are referred to as routes. Routes arrange and manage like stacks. The active route is placed on top of the stack, and that would be the current page. These routes are managed by the navigator widgets. In here, we use its push methods to push the article page to the top of the stack. In other words, it navigates to the article page route. Note, the article page is constructed with the use of the material page routes we get, which serves this widget as a route. The navigator widgets used here is provided by the material app. The article page widget has already been added to the standard project for this episode. Go ahead and open it. This widget returns a scaffold with an app bar and a center text. We'll update this widget very soon. Save your work and let's try it out. You can navigate the article page as expected and notice that the app bar automatically adds a back button for us. So we can click this to pop the routes off the stack. Let's navigate to the page once more. Next, let's create the contents of the article page. Open up the article_page.dart file, update the body of the scaffold with the following code. We use a list view to wrap the contents of the page to make it scrollable. It will deny a list of custom widgets we are going to create very soon. The last child is a container which would act as a separator. Let's create the article meta widgets. First, comment out order we get on the list view, then paste in the following code. Save your work. This is a stateless widget, which is used to display information about the article like its title, author information and publish dates. It returns a padding, which is used to add some inner spacing. It's child is a column that has a text, size box and a list tile as his children. The title text is the text theme of headline4 and customizes it to a different font size and width. The fontWidth property is used to adjust the boldness of the text. Note, the text theme has different styles that correspond to the material design guideline and headline4 is just one of them. Next, we used a size box to add space in between the text and the listTile widgets. And you can see the space in between them. A listTile is a predefined tiled widget provided by Flutter, that has useful list related interfaces. For example, you could use this for a chat item in a chat list. Here, we used it to display the author name and other related information. We set its contentPadding to zero. Since one of its ancestor already has a padding. We fill up its leading, title, subtitle, and trailing properties with widgets and the listTile widget arranges them accordingly. And the gray bar below is a container we added as a separator at the end of all widgets and the article page. Let's create the article content widget, which houses the main contents. Uncomment the article content line and paste in the following code. Save your work. You should be familiar with this code by now. When I mentioned some new additions for the padding, we previously used the edgeInsets.all constructor which adds the padding to all sides of the box. Now we use the EdgeInsets.fromLTRB constructor, which adds padding from the left to the top, right, and bottom. So, LTRB corresponds to the arguments positions. So we give a padding of 16 on the left, zero at the top, 16 on both the right and bottom sides of the box. For the content text, we give it a line height of 1.5, which increases the space in between each line of text. Next let's add the code for the article tags. Scroll to the top and uncomment article tags in the list view, then piston the following code at the end of the file. Save your work. This widget displays a list of chips, side-by-side. The chips are wrapped with a wrap widget, no pun intended. The wrap widget is used when you want to display a list of widgets on one axis, but need them to move to the next line if they exit their bounding box. This prevents the overflow one insign. to show you what I mean, let's duplicate some of the chips to show you how it would look like. You can see the wrap to the next line. If you use something like a roll, you'd get an overflow one insign at the end of the box. So, I'll undo that and save our work. inside the wrap widget, we added a spacing of 8 between each chip widget. For the padding, EdgeInsets.symmetric is used here to specify the padding on an axis. Here, we specified the horizontal padding of 16, which adds the padding to the left and the right sides. Finally, we need to show the article's image. We want to be able to display these at the top of the page and shrink the image as you scroll down the page. The list view is not built for this type of effect. Even if we were to create this with a list view, we'd need to incorporate other widgets and write many custom codes. Flutter provides us with the custom scroll view widget, which is used to create custom scroll effects using slivers. A sliver is just a portion of a scrollable area. In this case, the slivers are areas inside the custom scroll view. Update the code to use a custom screw view like so. Save your work. Let's scroll through the page to see what happens. You can see that the app bar extends and shrinks as we scroll the view. Let's go to another article. Cool. It grows and shrinks as expected. Here, the custom scroll view takes in a list of slivers. The first child is a SliverAppBar, while the second child is a sliverList. The sliver list is just a sliver version of a normal list view. We use it here because, a custom scroll view can only accept slivers as his children. And if you noticed, we removed the AppBar from the scaffold, because we'll be using the SliverAppBar. The sliver app bar is where the magic happens for the grow and shrink effects we've seen earlier. We set the expanded high to 300, which gives the app bar a height of 300. The pinned property is set to true, which prevents the app bar from scrolling out of view. Floating is also set to true, which makes the app bar visible, as soon as the user scrolls towards the app bar. You need to play around with these properties to see different effects they create Next, we give it an elevation of 50 to add some shadow below the app bar. Finally, we added the flexible space bar and set it's background to the article's image. The flexible spaces that push on behind the app's bar content, and it takes up the same height of the app bar. Custom scroll views are used to add custom scroll effects, just like what we just created.