Flutter: Interesting widgets, part 3.
Tags: flutter, codenewbie, 100daysofcode, dart
Published: 2021-10-25 14:45:01


Welcome one and all, to yet another blog article in this series where I outline various interesting [Flutter widgets](https://flutter.dev/docs/development/ui/widgets) that I have discovered in my exploits with the [framework](https://flutter.dev/). The first and second parts of the blog series can be found right [here](https://medium.com/@samuelwahome/flutter-interesting-widgets-part-1-c166c07f3b60) and [here](https://dev.to/samueldotcloud/flutter-interesting-widgets-part-2-1o35). Enough of the small talk, and let's get straight to the business at hand.
![GIF](https://media.giphy.com/media/xUOwGmsFStnxzIGC2s/giphy-downsized-large.gif)

---

###[Visibility](https://api.flutter.dev/flutter/widgets/Visibility-class.html).
Ever wanted to show or hide widgets programmatically? Well then, look no further as the `Visibility` widget is one option that you can consider. The `Visibility` widget works by wrapping around a child widget and determining whether to show or hide a child.
By default, the [visible](https://api.flutter.dev/flutter/widgets/Visibility/visible.html) property controls whether the child is included in the subtree or not; when it is not [visible](https://api.flutter.dev/flutter/widgets/Visibility/visible.html), the replacement child (typically a zero-sized box) is included instead. 
With properties such as [replacement](https://api.flutter.dev/flutter/widgets/Visibility/replacement.html), [child](https://api.flutter.dev/flutter/widgets/Visibility/child.html), [visible](https://api.flutter.dev/flutter/widgets/Visibility/visible.html), etc, customizing the functionality of the `Visibility` widget has never been easier. 
In case of any further queries, then this blog [post](https://medium.com/flutterdevs/show-hide-widget-in-flutter-227d69d29266) should be of much help.

###[RotatedBox](https://api.flutter.dev/flutter/widgets/RotatedBox-class.html).
Need to design a custom layout where a widget needs to be rotated about its own axis? Well, look no further as to the `RotatedBox` widget. This widget works by rotating its child by an integral number of quarter turns, with each quarter turn being equal to 90 degrees. Unlike [Transform](https://api.flutter.dev/flutter/widgets/Transform-class.html), which applies a transform just prior to painting, this object applies its rotation prior to layout, which means the entire rotated box consumes only as much space as required by the rotated child.
With properties such as [quarterTurns](https://api.flutter.dev/flutter/widgets/RotatedBox/quarterTurns.html), etc, one can customize how the `RotatedBox` widget and its child are rendered during runtime. 
In case of any further queries, this [video](https://www.youtube.com/watch?v=BFE6_UglLfQ) should be of much help.

###[CircleAvatar](https://api.flutter.dev/flutter/material/CircleAvatar-class.html).
Ever needed to represent a user's profile image in a circular manner. While there are many workarounds out there, the `CircleAvatar` widget is definitely one good option that you may consider. The `CircleAvatar` widget is simply a circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.
With properties such as [backgroundColor](https://api.flutter.dev/flutter/material/CircleAvatar/backgroundColor.html), [backgroundImage](https://api.flutter.dev/flutter/material/CircleAvatar/backgroundImage.html), [foregroundColor](https://api.flutter.dev/flutter/material/CircleAvatar/foregroundColor.html), [radius](https://api.flutter.dev/flutter/material/CircleAvatar/radius.html), etc, one can customize how the `CircleAvatar` widget is rendered.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=PDgIfizxbbk) should be of much help.

###[FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html).
Ever needed to listen to a one-time response from a network? Well then, the `FutureBuilder` widget may be just what you've been searching for. In short, it is simply a widget that builds itself based on the latest snapshot of interaction with a [Future](https://api.flutter.dev/flutter/dart-async/Future-class.html).
With properties such as [builder](https://api.flutter.dev/flutter/widgets/FutureBuilder/builder.html), [future](https://api.flutter.dev/flutter/widgets/FutureBuilder/future.html), etc, one can easily customize how the `FutureBuilder` widget is rendered. 
In case of any further queries, then this [video](https://www.youtube.com/watch?v=ek8ZPdWj4Qo) and discussion concerning [the difference between FutureBuilders and Streambuilders](https://stackoverflow.com/questions/50844519/flutter-streambuilder-vs-futurebuilder) should be of much help.

###[Center](https://api.flutter.dev/flutter/widgets/Center-class.html).
Ever needed to center a widget within its specific constraints. Then I do believe the `Center` widget may be just what you have been searching for. The `Center` widget works by centering its child within itself.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=c726pWTtxqI) should be of much help.

###[PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html).
Ever thought of creating multiple screens with animations, then making them swipeable, such as when designing an onboarding feature of sorts? Well then, look no further as the `PageView` widget may be just what you are looking for.
A `PageView` is simply a scrollable list that works page by page. It is also important to note that each child of a page view is forced to be the same size as the viewport.
With various constructors such as [builder](https://api.flutter.dev/flutter/widgets/PageView/PageView.builder.html), [custom](https://api.flutter.dev/flutter/widgets/PageView/PageView.custom.html), etc, one can easily customize how the `PageView` widget is rendered. In case of any further queries, then this [video](https://www.youtube.com/watch?v=J1gE9xvph-A) should be of much help.

###[CircularProgressIndicator](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html).
Ever needed your app to show that something is still being loaded in the background? Well then, the `CircularProgressIndicator` widget is simply one option that may just suit your specific use case.
A `CircularProgressIndicator` widget is simply a material design circular progress indicator, which spins to indicate that the application is busy.
With properties such as [backgroundColor](https://api.flutter.dev/flutter/material/CircularProgressIndicator/backgroundColor.html), [strokeWidth](https://api.flutter.dev/flutter/material/CircularProgressIndicator/strokeWidth.html), etc, one is able to customize how the `CircularProgressIndicator` widget is rendered. In case of any further queries, then this [video](https://www.youtube.com/watch?v=O-rhXZLtpv0) should be of much help.

###[TweenAnimationBuilder](https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html).
You've heard how [animation](https://flutter.dev/docs/development/ui/animations) is at the core of Flutter's philosophy. Looking for a widget that enables you to animate other widgets? Well, look no further as the `TweenAnimationBuilder` widget may be just what you are looking for. It is simply a [widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) builder that animates a property of a [Widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) to a target value whenever the target value changes.
With properties such as [child](https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder/child.html), [tween](https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder/tween.html), [builder](https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder/builder.html), etc, one can easily customize how the `TweenAnimationBuilder` widget is rendered. 
In case of any further queries, then this [video](https://www.youtube.com/watch?v=l9uHB8VXZOg) should be of much help.

###[MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html).
Designing an app that needs to dynamically cater for changing screen sizes such as when in portrait or landscape mode, or perhaps designing an app both for normal mobile phones and tablets? Then the `MediaQuery` widget may be just what you are looking for.
The `MediaQuery` widget  works by establishing a subtree in which media queries resolve to the given data. For example, to learn the size of the current media (e.g., the window containing your app), you can read the [MediaQueryData.size](https://api.flutter.dev/flutter/widgets/MediaQueryData/size.html) property from the [MediaQueryData](https://api.flutter.dev/flutter/widgets/MediaQueryData-class.html) returned by [MediaQuery.of](https://api.flutter.dev/flutter/widgets/MediaQuery/of.html): `MediaQuery.of(context).size`. Querying the current media using [MediaQuery.of](https://api.flutter.dev/flutter/widgets/MediaQuery/of.html) will cause your widget to rebuild automatically whenever the [MediaQueryData](https://api.flutter.dev/flutter/widgets/MediaQueryData-class.html) changes (e.g., if the user rotates their device).
In case of any further queries, then this [video](https://youtu.be/A3WrA4zAaPw) should be of much help.

###[Tooltip](https://api.flutter.dev/flutter/material/Tooltip-class.html).
Ever felt that the icons and/or images you use in your app are a bit obscure in terms of meaning? Then the `Tooltip` widget may be just what you are looking for. 
Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a `Tooltip` widget and provide a message which will be shown when the widget is long pressed.
Many widgets, such as [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html), [FloatingActionButton](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html), and [PopupMenuButton](https://api.flutter.dev/flutter/material/PopupMenuButton-class.html) have a `tooltip` property that, when non-null, causes the widget to include a [Tooltip](https://api.flutter.dev/flutter/material/Tooltip-class.html) in its build.
Tooltips improve the accessibility of visual widgets by proving a textual representation of the widget, which, for example, can be vocalized by a screen reader.
With properties such as [decoration](https://api.flutter.dev/flutter/material/Tooltip/decoration.html), [margin](https://api.flutter.dev/flutter/material/Tooltip/margin.html), [message](https://api.flutter.dev/flutter/material/Tooltip/message.html), etc, one is easily able to customize how the `ToolTip` widget will be rendered.
In case of any further queries, then this [video](https://www.youtube.com/watch?v=EeEfD5fI-5Q) should be of much help.

---

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