Looking to dip your toes or dive deep into Flutter and App Development? Overwhelmed with resources or Don't know where to start? Then you are at the right place! This is gonna be the 4th blog in a series of blogs I am writing on Flutter in an effort to teach you guys, share my learnings and help you build amazing applications using Flutter. Today, we are gonna talk about widgets in Flutter! (SUPER IMPORTANT)

By the end of this article, you will have a comprehensive understanding of Flutter widgets and how you can learn the entire widget catalog and work with them. Let's get started

What are Flutter Widgets and why are they even important?

Wait, Before you start reading this, Do you know what Flutter is? How does it work? How you can get started? No? That's okay, you can refer to this article here and learn everything you need to get started!

Now, let us see what are these Widgets. Widgets are the most important thing when it comes to developing applications with Flutter, Why? Because everything, Literally every single component of the app or UI you see is a widget. Let me illustrate👇🏻

The above image is a screenshot of one of my demo applications. As you can see, it has quite a few components on the screen like a chart to display chart bars indicating expenses, a list of transactions, a button to add a new transaction and more.

Each of them is a widget itself, The chart you see is a widget, the chart bar inside the chart is another widget, the Navigation bar is a widget and the button on the navigation bar is a widget too. A bunch of widgets are all put together or stacked on each other to build a UI.

Widgets are the building blocks of UI with Flutter!

Now to define What are these widgets, Flutter Widgets are building blocks that allow you to create the UI of your app. They are a collection of reusable UI elements that help you build complex and responsive User Interfaces for your app. Think of them as the different types of Lego blocks that you can use to build a Lego house. As you saw above, You can use Widgets to create buttons, text fields, images, sliders, and any other UI element that you need for your app.

But widgets are more than just UI elements here! They are actually small pieces of code that contain instructions on how to display something on the screen. This means that you can customize each Widget to behave and look the way you want it to.

Widgets in Flutter are pieces of code, meaning you can wire data, and write functions or code such that the widget performs and behaves the way you want it to. For instance, The button in the above screenshot is not just a UI element, it opens up a sheet to add a new transaction when you press it. I configured it to do that, you can configure it to do something else🤷🏻‍♂️

This approach to building a UI is called "UI as Code".

A sample text widget can be easily created as shown below:

Text(
  'Welcome to my Blog!',
  style: TextStyle(fontSize: 20),
)

To add-on to it, Flutter provides us with a wide range of widgets that anyone can use to build their application. There are different types of styles, types and states. Let's dive right into them!

Different types of Widgets

Flutter provides us with a wide range of widgets, there is an entire widget catalog they provide that we will come back to. But for now, you need to know that widgets are of two different types mainly. 👇🏻

Material Design and Cupertino Design

To put it in a plain simple manner, as you already know flutter allows us to build applications cross-platform.

Material design is the design language or set of styles widgets that are developed by Google, are used by default and primarily to build for Android.

Material design is the default design style as all the developers might not have access to a Mac to build for IOS. Material design is colourful and playful with rounded corners and more (Why don't you try them out and see for yourself?)

On the other hand, We have Cupertino Design. This is the design style or language that is built and used to build for IOS or Mac applications. This is a design language that is simple, sleek, and elegant with a professional look.

You can use both of these design styles in a single codebase and build an adaptive UI for your app.

You can even mix and match these design styles to build a UI that you like. How cool is that?

Apart from these, there is something called 'STATE' and the widgets you build are often used inside a Stateful or Stateless Widget. I have written an article explaining in detail about State, Stateless and Stateful widgets and how you can use them. You can check it out here.

As I mentioned earlier, Flutter provides us with a whole catalog of widgets. Yes, you can them out here. Yes, there are so many widgets to work with and available that looking at them, it gets overwhelming.

Learning the entire widget catalog

As you can see above, The widget catalog consists of different widgets from text to animations and more. How do you learn them all?

You do not. I repeat, You DO NOT need to learn the entire widget catalog. You can be dynamic and pick up widgets to use as and when you need them.

There are so many widgets out there and people often make the mistake of trying to learn each one of them. Why? Why do you even have to learn each one of them? You don't. Just learn to search for a widget in the catalog as per your use and implement it using the documentation. It's that simple.

Here's an example, I still do not know every available widget. But I can build good applications. How? I simply plan my application's UI first. if I wanna build an expense tracker like the one I demonstrated above, I will first plan my UI as to how I want it like where the chart is supposed to be, How do I want the transactions to be shown, where to be shown etc.

That's it, planning the UI gets half the job done. Now, I just have to surf through the widget catalog and find the widgets I need to build my UI in a top-down approach. As I find my widgets, Flutter has superb documentation that I can refer to so I can learn more about the widget and how to implement it in my app.

Building my UI piece by piece. When you do this, tell me, do you even need to learn everything?

Pro Tip: Organise your App better by breaking down your app into widgets and by creating a file for a certain component's widget or so. Try to have only one widget per file. Keeps your app and organisation structured and easy to work with

Flutter's documentation is your best friend, Learn to befriend any documentation, navigating and working with them. 90 percent of your issues will be resolved.

The beauty of widgets is, they might seem difficult or hard to work with in the beginning but as you keep working with them, using them, it gets very easy and one of the best things.

Practice makes it so easy that you literally have properties on your tongue. The only way to really learn the entire catalog is to keep building applications, working with them and practising more and more.

You don't have to build complex apps, pick up easy ones first and get a good grip on how you can organise your app, plan the UI, build the widgets accordingly, work with them and more. Keep iterating and watch yourself grow and become more fluent

Conclusion

In this short blog, we covered what exactly are widgets, why we need to use them in Flutter and How you can learn the entire widget catalog. With a little practice, you'll be creating beautiful UIs in no time! While this might seem basic, these are the fundamentals that Flutter is built on. Having a solid grip over these will take you a long way.

As mentioned, this is just the beginning - This is a part of the series of blogs I will be writing on Flutter development with many more exciting topics, insights, best practices, and more. So make sure to subscribe to my newsletter here, if you haven't already so you don't miss out on new any of them and stay up-to-date.

Like | Comment | Share | Follow Rohit T for more!

You can catch me on my socials here, and even let me know how this article helped you, and what would you like me to cover next! Feel free to let me know if you think I should've covered something.

Thank you for reading! Happy Fluttering!