Flutter: Interesting widgets, part 2.
Tags: flutter, dart, ios, android
Published: 2021-10-18 06:21:48



Welcome one and all to yet another edition of this blog series, that revolves around interesting yet useful [Flutter](https://flutter.dev/?gclid=CjwKCAjwk6-LBhBZEiwAOUUDpyiFfJ5G96xWuWr-lzfw7y7EseI5e8gpd9qbPai9Zu78jZWSPJxViRoC8Y4QAvD_BwE&gclsrc=aw.ds) widgets that I've encountered in my exploits with the framework. The first part of this series can be found right [here](https://medium.com/@samuelwahome/flutter-interesting-widgets-part-1-c166c07f3b60). Enough of the pleasantries, and let's cut straight to the chase.

![GIF](https://media.giphy.com/media/l4Epj0XzZbQ4go3Qs/giphy.gif)

###[Icon](https://api.flutter.dev/flutter/widgets/Icon-class.html).

Ever need to render icons in your app? Well, look no further as this widget definitely has your back. Simply put, the `Icon` widget is a graphical icon widget, that is able to draw icons as described in its [icon](https://api.flutter.dev/flutter/widgets/Icon/icon.html) property, that accepts an [IconData](https://api.flutter.dev/flutter/widgets/IconData-class.html) class, which is a description of an icon fulfilled by a font glyph.
This widget has other properties that can be modified, such as [size](https://api.flutter.dev/flutter/widgets/Icon/size.html) and [color](https://api.flutter.dev/flutter/widgets/Icon/color.html), all in order to make the UI even more appealing. It is important to note that Icons are not interactive, hence would need to be wrapped with other interactive widgets, or one may also consider material's [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html), which does that work just as efficiently.

###[Text](https://api.flutter.dev/flutter/widgets/Text-class.html).

This widget is responsible for displaying a string of text, but with a single style. This widget has various properties such as [data](https://api.flutter.dev/flutter/widgets/Text/data.html), [maxLines](https://api.flutter.dev/flutter/widgets/Text/maxLines.html), [overflow](https://api.flutter.dev/flutter/widgets/Text/overflow.html), [style](https://api.flutter.dev/flutter/widgets/Text/style.html), [textAlign](https://api.flutter.dev/flutter/widgets/Text/textAlign.html), and [others](https://api.flutter.dev/flutter/widgets/Text-class.html) that are used to customize how a `Text` widget is rendered on the screen.
It is important to note that the `Text` widget is not interactive, hence to make [Text](https://api.flutter.dev/flutter/widgets/Text-class.html) react to touch events, wrap it in a [GestureDetector](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html) widget with a [GestureDetector.onTap](https://api.flutter.dev/flutter/widgets/GestureDetector/onTap.html) handler. In a material design application, consider using a [TextButton](https://api.flutter.dev/flutter/material/TextButton-class.html) instead, or if that isn't appropriate, at least using an [InkWell](https://api.flutter.dev/flutter/material/InkWell-class.html) instead of [GestureDetector](https://api.flutter.dev/flutter/widgets/GestureDetector-class.html). To make sections of the text interactive, use [RichText](https://api.flutter.dev/flutter/widgets/RichText-class.html) and specify a [TapGestureRecognizer](https://api.flutter.dev/flutter/gestures/TapGestureRecognizer-class.html) as the [TextSpan.recognizer](https://api.flutter.dev/flutter/painting/TextSpan/recognizer.html) of the relevant part of the text.

###[RichText](https://api.flutter.dev/flutter/widgets/RichText-class.html).

This widget is also responsible for displaying text. However, the `RichText` widget displays text that uses multiple different styles. The text to display is described using a tree of [TextSpan](https://api.flutter.dev/flutter/painting/TextSpan-class.html) objects, each of which has an associated style that is used for that subtree.
This widget also has various useful properties such as [children](https://api.flutter.dev/flutter/widgets/MultiChildRenderObjectWidget/children.html), [maxLines](https://api.flutter.dev/flutter/widgets/RichText/maxLines.html), [overflow](https://api.flutter.dev/flutter/widgets/RichText/overflow.html), [text](https://api.flutter.dev/flutter/widgets/RichText/text.html), [textAlign](https://api.flutter.dev/flutter/widgets/RichText/textAlign.html), etc, that can be used to customize how the `RichText` widget is rendered on the screen. For more information, this [video](https://www.youtube.com/watch?v=rykDVh-QFfw) will definitely be of much help.

###[Streambuilder](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html).

According to the official documentation, the `Streambuilder` widget is simply a widget that builds itself based on the latest snapshot of interaction with a [Stream](https://api.flutter.dev/flutter/dart-async/Stream-class.html). This widget is especially useful when retrieving data asynchronously from a source, and displaying that data via the use of other widgets.
This widget has various properties such as [builder](https://api.flutter.dev/flutter/widgets/StreamBuilder/builder.html), [initialData](https://api.flutter.dev/flutter/widgets/StreamBuilder/initialData.html), [stream](https://api.flutter.dev/flutter/widgets/StreamBuilderBase/stream.html), etc, that define how a new `Streambuilder` widget is built. 
For more information on this widget and streams in general, then [this](https://youtu.be/MkKEWHfy99Y) and [that](https://api.flutter.dev/flutter/widgets/StreamBuilderBase/stream.html) video should be of much help.

###[ListTile](https://api.flutter.dev/flutter/material/ListTile-class.html).
Ever wanted your app's list display to follow material design guidelines, or you just couldn't find the right combination of widgets to create a whole other widget to be displayed in a list? Well, here comes the `ListTile` widget that solves just that predicament. 
A `ListTile` widget contains one to three lines of text optionally flanked by icons or other widgets, such as [check boxes](https://api.flutter.dev/flutter/material/Checkbox-class.html). The icons (or other widgets) for the tile are defined with the [leading](https://api.flutter.dev/flutter/material/ListTile/leading.html) and [trailing](https://api.flutter.dev/flutter/material/ListTile/trailing.html) parameters. The first line of text is not optional and is specified with [title](https://api.flutter.dev/flutter/material/ListTile/title.html). The value of [subtitle](https://api.flutter.dev/flutter/material/ListTile/subtitle.html), which is optional, will occupy the space allocated for an additional line of text, or two lines if [isThreeLine](https://api.flutter.dev/flutter/material/ListTile/isThreeLine.html) is true. Note that [leading](https://api.flutter.dev/flutter/material/ListTile/leading.html) and [trailing](https://api.flutter.dev/flutter/material/ListTile/trailing.html) widgets can expand as far as they wish horizontally, so ensure that they are properly constrained. List tiles are typically used in [ListViews](https://api.flutter.dev/flutter/widgets/ListView-class.html), or arranged in [Columns](https://api.flutter.dev/flutter/widgets/Column-class.html) in [Drawers](https://api.flutter.dev/flutter/material/Drawer-class.html) and [Cards](https://api.flutter.dev/flutter/material/Card-class.html).
This widget has various properties such as [contentPadding](https://api.flutter.dev/flutter/material/ListTile/contentPadding.html), [enabled](https://api.flutter.dev/flutter/material/ListTile/enabled.html), [hoverColor](https://api.flutter.dev/flutter/material/ListTile/hoverColor.html), [leading](https://api.flutter.dev/flutter/material/ListTile/leading.html), [onTap](https://api.flutter.dev/flutter/material/ListTile/onTap.html), [selected](https://api.flutter.dev/flutter/material/ListTile/selected.html), [shape](https://api.flutter.dev/flutter/material/ListTile/shape.html), [subtitle](https://api.flutter.dev/flutter/material/ListTile/subtitle.html), etc, that define how the `ListTile` widget is rendered on the screen. 
In case of any further queries, then this [video](https://www.youtube.com/watch?v=l8dj0yPBvgQ) should be of much help.

###[RefreshIndicator](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html).
Ever needed to create the 'swipe to refresh feature'? Well, look no further as this has been the widget that you've definitely been searching for. A `RefreshIndicator` in simple terms, is a widget that supports the Material "swipe to refresh" idiom.
When the child's [Scrollable](https://api.flutter.dev/flutter/widgets/Scrollable-class.html) descendant over scrolls, an animated circular progress indicator is faded into view. When the scroll ends, if the indicator has been dragged far enough for it to become completely opaque, the [onRefresh](https://api.flutter.dev/flutter/material/RefreshIndicator/onRefresh.html) callback is called. The callback is expected to update the scrollable's contents and then complete the [Future](https://api.flutter.dev/flutter/dart-async/Future-class.html) it returns. The refresh indicator disappears after the callback's [Future](https://api.flutter.dev/flutter/dart-async/Future-class.html) has completed.
It is also important to note that a [RefreshIndicator](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html) can only be used with a vertical scroll view.
This widget has various properties such as [backgroundColor](https://api.flutter.dev/flutter/material/RefreshIndicator/backgroundColor.html), [color](https://api.flutter.dev/flutter/material/RefreshIndicator/color.html), [displacement](https://api.flutter.dev/flutter/material/RefreshIndicator/displacement.html), [onRefresh](https://api.flutter.dev/flutter/material/RefreshIndicator/onRefresh.html), [child](https://api.flutter.dev/flutter/material/RefreshIndicator/child.html), etc, that define where and how the `RefreshIndicator` widget shall be rendered on the screen.
In case of further queries, then this [video](https://www.youtube.com/watch?v=ORApMlzwMdM) should be of much help.

###[ClipRRect](https://api.flutter.dev/flutter/widgets/ClipRRect-class.html).
Need a rounded rectangle shape on a widget? Well, look no further as the `ClipRRect` widget is definitely what you've been searching for. In simple terms, this widget works by clipping its child using a rounded rectangle.
With properties such as [borderRadius](https://api.flutter.dev/flutter/widgets/ClipRRect/borderRadius.html), etc, one can customize how this widget is rendered on the screen.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=eI43jkQkrvs) should be of much help.

###[Expanded](https://api.flutter.dev/flutter/widgets/Expanded-class.html).
Ever needed a child widget in a [Row](https://api.flutter.dev/flutter/widgets/Row-class.html), [Column](https://api.flutter.dev/flutter/widgets/Column-class.html), or [Flex](https://api.flutter.dev/flutter/widgets/Flex-class.html) to fill and occupy any extra space? Then the `Expanded` widget is definitely what you've been searching for. If multiple children are expanded, the available space is divided among them according to the [flex](https://api.flutter.dev/flutter/widgets/Flexible/flex.html) factor.
With properties such as [child](https://api.flutter.dev/flutter/widgets/ProxyWidget/child.html), [flex](https://api.flutter.dev/flutter/widgets/Flexible/flex.html), etc, one can define how this widget is rendered on the screen.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=_rnZaagadyo) should be of much help.

###[Padding](https://api.flutter.dev/flutter/widgets/Padding-class.html).
Need to add some extra space around a widget? Well, look no further as the `Padding` widget may be just what you need. The `Padding` widget works by insetting its child by the given padding.
With its properties such as [child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html), [padding](https://api.flutter.dev/flutter/widgets/Padding/padding.html), etc, one can customize how the widget is rendered on a screen.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=oD5RtLhhubg) should be of much help.

###[GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html).
Ever needed to display items in a grid format? Well, look no further as the `GridView` widget may be just what you are looking for. A grid view is simply a scrollable, 2D array of widgets. With its various [constructors](https://api.flutter.dev/flutter/widgets/GridView-class.html) such as [builder](https://api.flutter.dev/flutter/widgets/GridView/GridView.builder.html), [count](https://api.flutter.dev/flutter/widgets/GridView/GridView.count.html), [custom](https://api.flutter.dev/flutter/widgets/GridView/GridView.custom.html), [extent](https://api.flutter.dev/flutter/widgets/GridView/GridView.extent.html), etc, one is able to customize the functionality of the resulting grid.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=bLOtZDTm4H8) should be of much help.

---

That was all that I had to share for now✌. To all readers, cheers to code🥂, and have a blessed day.