Interesting Flutter Widgets
Hey Everyone! In this article, we will discuss about interesting Flutter Widgets that every Developer should know ! We won’t be discussing about more basic widgets such as Column, Row, Container etc.
1. SafeArea :
SafeArea is basically a glorified Padding widget. 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.
Sometimes, you don’t need the app bar and you have to create own custom container containing some buttons and title to have customized . So, remove the appBar and wrap the scaffold with SafeArea.
2. Wrap :
If you want to arrange your elements in vertical fashion, then you use column and for horizontal fashion, you use row. In the below screenshot1, lets say I have three buttons and I want to display them in row then it works fine. Lets assume a situation in which the buttons need to display some sort of categories and data has to come from the server and we don’t know how much categories were going to display. If I added another button here then check the screenshot2 then it says that there is not enough space to display the fourth button.
So, for this solution wrapped widget comes handy. Just replace the row with a wrap.
Replace Row into Wrap widget
3. RichText
I have a textview “Think Technically” in black color and center of a container. I want to keep Think word as it is and Technically word bold with a red color. First thing that comes into mind is we can create a column and add two textviews but that doesn’t seem interesting. So, we’ll be using a richText widget here.
4. ClipRRect
I have an app with a image at its center and I want to round out the edges of the image. So, we can wrap the image with a clip or rectangle widget.
You can use clipRRect with any other widgets.
5. MediaQuery
MediaQuery is really a nice tool given by flutter SDK. It tells us in depth details regarding the size, width, brightness and also all sorts of device details that on which your app is running.
In the below Screenshot1, there are two Flexible with flex 5 each and its cover the half screen. App is looking nice but the problem comes when I rotate the device (Screenshot2) . I wanted one container to be on the left side and another to be on right side(Screenshot3). So, we can solve this problem using mediaQuery by checking the orientation of the device.
With this widget, how you can achieve more responsiveness in your app and you don’t have to go to layout builder for each and every time.
This is it, I hope this article has provided you with valuable information about what is new or different about Flutter widget. Happy Coding!
