Perfect use of Widgets in Flutter
Flutter framework is known for the easiness it has provided to the developers. It has made app development so easy that even beginner developers can make complex user interfaces. But what is the point of writing this article? Let me tell you…
Flutter comes with 100s of built-in widgets that can be used to build beautiful UI. Many of them are quite similar and provide kind of same functionality, but they are made for specific use cases. Let’s jump to the examples.
GestureDetector VS InkWell
For detecting gestures in Flutter, we have two famous widgets named GestureDetector and InkWell. The InkWell detects taps while GestureDetector detects all types of gestures such as drag, pinch, tap etc. Now the question arises, if the GestureDetector can detect a tap, then why do we have InkWell? The difference is, that InkWell responds with a ripple effect, which makes the UI interactive, while GestureDetector doesn’t provide any visible response.
- Use InkWell when working with Buttons, ListTiles, and other interactive components
- Use GestureDetector when you want to detect different gestures (use for detecting taps only when you don’t want UI component to be interactive)
SizedBox VS Container
SizedBox and Container are used to define the layout, and developers most of the time use Container instead of SizedBox. Let me tell you the difference. You can define height and Width in SizedBox and Container as well, but in Container, you can also give it the BoxDecoration which includes shadow, color, gradient, margin, padding, etc.
- Use SizedBox when you only have to give the height and width
- Only use Container when you need to decorate it with features like Color, Shadow, or add margin, etc.
Misuse of Row Widget and Column Widget
The Row and Column widgets are commonly used in Flutter because they help you in creating layouts. They are pretty useful until they are used in excess. Developers keep nesting Rows and Columns eventually destroying the code readability. The solution to this is to use Flex Widget, Wrap Widget, Grid Widget etc.
Expanded VS Flexible
The Expanded widget is used with rows and columns to occupy all the remaining space. In real-time, there are different screens where the size of the children of the Expanded widget reduces too much or increases too much. You cannot control it, the alternative to it is the Flexible widget, in which you define a ratio, which gives you more control over the layout.
SizedBox VS Spacer
It might be the rarest case where you don’t need space in-app UI, this shows how often developers use widgets to add space in their UI. The commonly used widget for adding space in Flutter is SizedBox. It is used in Columns and Rows by adding height and width respectively to add some space. Flutter also has a dedicated widget for adding space, which automatically adjusts the needed space in rows and columns, also improving the code readability. It is suggested whenever you want to add equal space between children of a row/column, use Spacer instead of SizedBox.
Will you use these techniques? Do let me know in the comments. Also if I missed something or something on which you want me to write an article, suggest me in the comments section.
