Common Widgets in Flutter

Whatever we build our applications using flutter, these widgets are commonly used in our mobile apps. Although the method of creating a User Interface(UI) can vary, the usage of widgets remains consistent.

I would like to share the commonly used widgets in Flutter. If you are a Flutter developer, you may already be familiar with them.

1. Stateless and Stateful Widget:
   Stateless Widget is static widget as only updates when it is initialized where Stateful Widget is the dynamic widget as the changes dynamically.
   Only Stateful Widget can use setState()

2. Scaffold Widget:
   The Scaffold is a widget in Flutter used to implements the basic material design visual layout structure.
   With help of Scaffold Widget, we can use other widgets like AppBar, Body, Floating Action Bar, Bottom Navigation Bar and Persistent Footer Buttons, etc.

3. AppBar: Used to create a navigation bar at the top of the screen.

4. Text: Used to display text with various styles, such as font size, font weight, color, and alignment.

5. Container: Used to contain other widgets and customize their appearance, such as setting padding, margin, color, and border

6. SizedBox: allows you to create a box with a specified width, height, or both

7. Row & Column: Used to layout widgets vertically and horizontally, respectively.

8. TextFormField: Used for creating a form input field with validation.
   Used to allow users to input text in your app

9. Card: Used for creating a container with a shadow effect that can be used to display content.

10. IconButton, MaterialButton, & ElevatedButton: used to create buttons with different styles and properties

11. Image: Used to display images in your app, either from local resources or from a network.

12. ListView: Used to display a scrollable list of items, either vertically or horizontally.

13. ClipRRect: Used to clips its child using a rounded rectangle.

Each widget has its own unique properties, and we can utilize the properties of the widget that are required to our application.

If you need more widgets, Please Have a look on flutter official docs - flutter widgets

I would like to share the UI that I created using these widgets in Flutter, and the code is available on GitHub. This provides you with an idea of how you can use these commonly used widgets to create simple UI apps.

Each widget has its own roles and responsibilities but the important things is to identify which widget is suitable for our application and will make it visually appealing.

Screenshots

If you create your own Flutter UI app using these widgets and share your code on GitHub, you can post the UI repository link in the comment section of this post. I would be delighted to review your code and provide suggestions on how to improve it.

Bonus
If you check my code, I used MediaQuery where MediaQuery do create responsive and adaptive UI that can adjust their layout and behavior based on the device's screen size and other attributes
example

  SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
          )

I hope that this information proves to be helpful, and I look forward to sharing more in my future posts. Thank you.