Flutter Widgets - A brief guide on Widgets in Flutter

Updated on 22 Oct 20•3 min read

flutter widgets

In the eyes of mobile developers, Flutter is manna straight from heaven

Developers of an iOS app need not answer the question “When is it coming to Android?”

They already have questions haunting them like:

  1. When is the build ready to be shipped?
  2. How are we going to support this?
  3. Why is your shirt so dirty and you smell funny?

This was why Flutter came to the scene and unifying the iOS and Android codebases meant that developers now had more time to do other things, like sleep.

code cartoon

Image Credit

So now that we know Flutter is super useful, let us see what Flutter Widgets are all about.

What is Flutter Widgets?

Flutter was developed by Google to make sure that there is not a steep learning curve for an iOS developer or an android developer when they want to go cross-platform.

All that Flutter asked was a blank screen.

widgets

There were widgets pre-built so that the developers don't have to spend hours thinking about which codebase to copy to note pad and vice versa.

The central idea behind a flutter widget is that once you build your UI using Widgets, you can then use these widgets to describe what view should look like, along with their configuration and state.

See how we can use a simple Flutter App to call the runapp() function with a widget:

[@portabletext/react] Unknown block type "gist", specify a component for it in the `components.types` prop

The Widget Tree consists of two widgets, the Center widget and its child, the Text Widget.

Here are a few basic widgets listed for your ready reference:

  1. Text,
  2. Row,
  3. Column,
  4. Stack and
  5. Container.

There is a whole lot of free information available on the official Flutter widget page, which you can find here​

The functionalities of a widget in flutter consist of anything ranging from a framework for your entire app (scaffold widget) to even animating an ink splash!

Creating your first Widget


Every widget flutter has its own unique purpose, just like how you were created on this earth to fulfill your own destiny. (Sorry got a bit philosophical there).

Margaret Mead Quote

Okay Margaret Mead never said that, but that doesn’t mean you can stop on creating your first widget.

Imagine if you as a developer should code an “action button” for a shopping app. You can use the codebase from a Dart programming language and build the entire widget in less than a day.

For the full video tutorial, click here.

And there you have it, folks!! A cool Flutter Widget guide that you need to know.

author

Prakash Donga

LinkedIn icon

Tags

FAQS

Stay curious, Questions?

What are widgets in Flutter?

Click to show answer

Widgets are the building blocks of any Flutter application. They come in quite handy while building the framework for your entire app. For example, a text input widget helps you input text. There are a host of widgets available in Flutter, and the information for all of these is available online for free.

How many types of widgets are there in Flutter?

Click to show answer

There are 2 types of widgets in Flutter. These are classified as:

  1. Stateless Widget
  2. Stateful Widget.

Why are Flutter Widgets important?

Click to show answer

Widgets are the UI components in Flutter, kind of like how components work for React Native. Widgets help describe the configuration of an element, and thus, are one the building blocks of the Flutter framework.


How do you call a widget in Flutter?

Click to show answer

Flutter does not encourage calling the method of a child widget from a parent widget.

Instead, you can pass on the state of a child widget as a construction parameter. 

Can we build custom widgets in Flutter?

Click to show answer

The answer is YES, you can. Start a new Flutter project, and choose the Flutter Package for the project type. It is then simply a question of adding the custom widget you coded into the lib folder.