This content originally appeared on DEV Community and was authored by Samuel Wahome
Welcome one and all to yet another edition of this blog series, that revolves around interesting yet useful Flutter widgets that I've encountered in my exploits with the framework. The first part of this series can be found right here. Enough of the pleasantries, and let's cut straight to the chase.
Icon.
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 property, that accepts an IconData 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 and color, 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, which does that work just as efficiently.
Text.
This widget is responsible for displaying a string of text, but with a single style. This widget has various properties such as data, maxLines, overflow, style, textAlign, and others 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 react to touch events, wrap it in a GestureDetector widget with a GestureDetector.onTap handler. In a material design application, consider using a TextButton instead, or if that isn't appropriate, at least using an InkWell instead of GestureDetector. To make sections of the text interactive, use RichText and specify a TapGestureRecognizer as the TextSpan.recognizer of the relevant part of the text.
RichText.
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 objects, each of which has an associated style that is used for that subtree.
This widget also has various useful properties such as children, maxLines, overflow, text, textAlign, etc, that can be used to customize how the RichText widget is rendered on the screen. For more information, this video will definitely be of much help.
Streambuilder.
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. 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, initialData, stream, etc, that define how a new Streambuilder widget is built.
For more information on this widget and streams in general, then this and that video should be of much help.
ListTile.
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. The icons (or other widgets) for the tile are defined with the leading and trailing parameters. The first line of text is not optional and is specified with title. The value of subtitle, which is optional, will occupy the space allocated for an additional line of text, or two lines if isThreeLine is true. Note that leading and trailing widgets can expand as far as they wish horizontally, so ensure that they are properly constrained. List tiles are typically used in ListViews, or arranged in Columns in Drawers and Cards.
This widget has various properties such as contentPadding, enabled, hoverColor, leading, onTap, selected, shape, subtitle, etc, that define how the ListTile widget is rendered on the screen.
In case of any further queries, then this video should be of much help.
RefreshIndicator.
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 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 callback is called. The callback is expected to update the scrollable's contents and then complete the Future it returns. The refresh indicator disappears after the callback's Future has completed.
It is also important to note that a RefreshIndicator can only be used with a vertical scroll view.
This widget has various properties such as backgroundColor, color, displacement, onRefresh, child, etc, that define where and how the RefreshIndicator widget shall be rendered on the screen.
In case of further queries, then this video should be of much help.
ClipRRect.
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, etc, one can customize how this widget is rendered on the screen.
In case of any further queries, then this video should be of much help.
Expanded.
Ever needed a child widget in a Row, Column, or Flex 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 factor.
With properties such as child, flex, etc, one can define how this widget is rendered on the screen.
In case of any further queries, then this video should be of much help.
Padding.
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, padding, etc, one can customize how the widget is rendered on a screen.
In case of any further queries, then this video should be of much help.
GridView.
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 such as builder, count, custom, extent, etc, one is able to customize the functionality of the resulting grid.
In case of any further queries, then this video 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.
This content originally appeared on DEV Community and was authored by Samuel Wahome
Samuel Wahome | Sciencx (2021-10-18T06:21:48+00:00) Flutter: Interesting widgets, part 2.. Retrieved from https://www.scien.cx/2021/10/18/flutter-interesting-widgets-part-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.