Welcome one and all, to yet another blog article in this series where I outline various interesting Flutter widgets that I have discovered in my exploits with the framework. The first and second parts of the blog series can be found right here and here. Enough of the small talk, and let's get straight to the business at hand.
Visibility.
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 property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead.
With properties such as replacement, child, visible, etc, customizing the functionality of the Visibility widget has never been easier.
In case of any further queries, then this blog post should be of much help.
RotatedBox.
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, 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, etc, one can customize how the RotatedBox widget and its child are rendered during runtime.
In case of any further queries, this video should be of much help.
CircleAvatar.
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, backgroundImage, foregroundColor, radius, etc, one can customize how the CircleAvatar widget is rendered.
In case of any further queries, then this video should be of much help.
FutureBuilder.
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.
With properties such as builder, future, etc, one can easily customize how the FutureBuilder widget is rendered.
In case of any further queries, then this video and discussion concerning the difference between FutureBuilders and Streambuilders should be of much help.
Center.
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 should be of much help.
PageView.
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, custom, etc, one can easily customize how the PageView widget is rendered. In case of any further queries, then this video should be of much help.
CircularProgressIndicator.
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, strokeWidth, etc, one is able to customize how the CircularProgressIndicator widget is rendered. In case of any further queries, then this video should be of much help.
TweenAnimationBuilder.
You've heard how animation 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 builder that animates a property of a Widget to a target value whenever the target value changes.
With properties such as child, tween, builder, etc, one can easily customize how the TweenAnimationBuilder widget is rendered.
In case of any further queries, then this video should be of much help.
MediaQuery.
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 property from the MediaQueryData returned by MediaQuery.of: MediaQuery.of(context).size. Querying the current media using MediaQuery.of will cause your widget to rebuild automatically whenever the MediaQueryData changes (e.g., if the user rotates their device).
In case of any further queries, then this video should be of much help.
Tooltip.
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, FloatingActionButton, and PopupMenuButton have a tooltip property that, when non-null, causes the widget to include a Tooltip 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, margin, message, etc, one is easily able to customize how the ToolTip widget will be rendered.
In case of any further queries, then this video 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.
Top comments (0)