Flutter: Interesting widgets, part 1.
Welcome one and all to yet another interesting blog series on interesting, yet common Flutter widgets that I’ve come across in my exploits with this framework. One may ask as to what widgets really are, and my answer would be that a widget is simply a UI building block, or more simply put, a way to declare and build UI in Flutter. This blog post should provide more clarity on widget definitions.
Now that we’re done with simple definitions, we should definitely get right down to business.
Need to implement a simple or even complex UI structure in Flutter? Then you’ll probably need the Scaffold widget to accomplish just that. Think of the scaffold widget as a base or foundation of sorts that follows material design guidelines, onto which other structures such as the App bar, Bottom Navigation Bar, Drawer, etc, may be added onto a specific app screen/route. It is even possible to nest scaffolds on more complex routes.
All in all, the Scaffold widget has various properties that enable you to customize the appearance of each route in your app. This post should help you get a deeper understanding of the said widget.
2. SafeArea.
Think of the SafeArea widget as a Padding of sorts that ensures app content is well away from any system obstructions such as the status bar, or even physical features such as the notch in some iPhone devices. Simply put, if you wrap another widget with SafeArea, it adds any necessary padding needed to keep your widget from being blocked by the system status bar, notches, holes, rounded corners, and other "creative" features by manufacturers.
If case you do need any further clarification, then this video should be of much help.
3. MaterialApp.
You’ve probably seen this widget somewhere in your main dart file when instantiating a new Flutter application. Well, this widget’s function is primarily to build out a base application that uses material design, as defined in the documentation.
What this simply means is that MaterialApp provides a bunch of properties that are very useful when configuring navigation via routes, theming in your application, the title of your application, the primary scroll behavior of your application, and so much more.
In case you do need any more information on this widget, then this post should be of much help.
Need to make a single widget scrollable, perhaps as its container becomes smaller with the changing width and/or height? Well, look no further as this widget may be just what you are looking for.
Simply put, the SingleChildScrollViewwraps around a widget, and when space is not enough, the widget inside can scroll on the spindle. It is important to note that the SingleChildScrollView can only have one direct widget.
In case you may need any clarification on this widget, then this post should be of much help.
5. Stack.
This widget simply overlaps or stacks its children relative to the edges of its box. The Stack widget allows us to put up multiple layers of widgets onto the screen. The widget takes multiple children and orders them from bottom to top. So the first item is the bottommost and the last is the topmost.
The size of the Stack is the size of the largest member in the layer. So if the bottom layer covers the complete screen then the size of the Stack is the complete screen. Each member in the stack needs to be positioned or aligned, or else it ends up in the top left corner by default, hence the Stack widget is used in conjunction with the Positioned widget for that very purpose.
For more information on this widget, then this video and blog post should be of much help.
6. Positioned.
All this talk about the Stack widget and here is its companion of sorts, the Positioned widget. The Positioned widget’s main function is to control where a child of a Stack is positioned. There are a couple of types of the Positioned widget, but they all serve the same purpose.
In case you do need any more clarification, then this post and this video should be of much help.
7. SizedBox.
A SizedBox simply refers to a box with a specific size. If given a child, this widget forces it to have a specific width and/or height. These values will be ignored if this widget’s parent does not permit them.
A SizedBox may also be used as a separator of sorts, by placing it between widgets in a Row or Column or any other associated widget and defining a specific width or height.
In case you do need any more clarification, then this video should be of much help.
8. Column.
A Column is simply a widget that displays its children in a vertical array. It is important to note that the Column widget does not scroll. If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.
If you do have multiple children in a column and you’d want them to fill up any empty vertical space, then you may consider wrapping the affected child using the Expanded widget.
In case of any further queries, then this post should be of much help.
9. Row.
Think of a Row as a horizontal variant of the Column. Simply put, a Row is a widget that displays its children in a horizontal array. It is also important to note, that just as in the Column, the Row widget also doesn’t scroll, hence it would also be more appropriate to use a ListView in such a scenario.
In case of any further queries, then this post should be of much help.
10. Container.
According to official documentation, a container is simply a convenience widget that combines common painting, positioning, and sizing widgets. Simply put, the Container widget is used to contain a child widget with the ability to apply some styling properties.
This means that just as a SizedBox, one is able to wrap a widget with a container just the same way, only this time, there are additional properties that you can customize including color, decoration, constraints, clipBehaviour, etc.
In case of any further queries, then this video and blog post 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.
