Understanding widgets in Flutter (burger analogy 🍔)

Hello there!

I hope that you had a good time installing the Flutter SDK and have successfully set up your machine to make fine applications.💃🏿

I know you must’ve looked up some tutorials where everyone was screaming, “Flutter is made up of widgets, and everything on your screen is a widget;” I’m sure these left you wondering, “Can’t someone just use simpler English?😢”. Yeah, I too felt frustrated at first, but guess what! I figured out a very weird way for you to understand the concept of widgets. So, at this point, you should smile and have a good read.

A few months ago, I was a total newbie and knew nothing about mobile app development – I didn’t even know what widgets were about. But at a point, understanding how widgets work became very necessary, so I had to find a way to make it sink in.

First, it is important to understand that the Flutter framework uses widgets as the core building blocks for anything from controls (e.g., text, buttons, and toggles) to layout (e.g., centering, padding, rows, and columns). Widgets are the most basic unit of every app built in Flutter. Text,images, and text fields come as a widgets. Let’s understand it with this analogy called the burger analogy. Why? Because I love food 😍, I mean who doesn’t?🤷‍♂️

Think of a Flutter app as the hamburger in the above image: Like me, you decide to try making yourself a hamburger(which I obviously failed at, trust me🤣). You look up the recipe and the ingredients you need. Finally, you get them together. And you think, “I need to make it more personal”, you know, less beef and more vegetables. So, you go ahead and place your bread, lettuce, tomatoes, cucumber, a slim trim of beef, more tomatoes, some onions, and then more bread. Yummy😋, huh? You’re probably excited that you made your own hamburger even though you followed a recipe.

Now, let’s make another hamburger, but this time the hamburger is an app that, let’s say, displays your name and a photo of you. We start with the background, which is the MaterialApp. The MaterialApp is “a convenience widget that wraps a number of widgets that are commonly required for material design applications.” MaterialApp is like a bedrock for every Flutter design as Flutter uses the material design. So, for you to be able to implement material design features, it is important to declare your MaterialApp first. Since we have our bedrock laid out, we place our bread, i.e., the scaffold widget. The scaffold widget is important because it gives us extra features (like an AppBar and floating action button), plus some super cool widgets.

We can place our circle avatar, which holds our image, and a text widget that holds our name. With a text field and some styling, we have a beautifully designed app.

In summary, when understanding widgets, you should imagine making a burger. Imagine that you’ve been given all the basic ingredients, and now, you can choose from a bountiful basket of ingredients and spices to make the burger of your choice.

It is the same with widgets in Flutter. You have been given mini-building blocks to make your own designs and bring your ideas and functionalities to birth. It is now left to you to know how to use them, when to use them, and where to use each widget to solve a task.

The Flutter team does a good job by featuring widgets weekly on the Flutter YouTube channel in the series “Flutter Widget of the Week.” In this series, widgets are explained in short videos that range from 54 seconds to 1-minute in length. Do well to check them out and explore all the widgets.

I hope this helps someone out there understand Flutter widgets better.

Please send me a comment, ask a question, and drop a review @iamCynthiaPeter. And if you got confused with the burger story 😂, I can always use another metaphor to further explain this. Please do reach out.

Thank you for reading, again 💕