Widgets in Flutter

Capítulo 72

Estimated reading time: 3 minutes

+ Exercise
Audio Icon

Listen in audio

0:00 / 0:00

Widgets are the fundamental elements of a user interface (UI) in Flutter. They are the building blocks from which Flutter builds its UI. They are immutable and described in terms of other lower-level widgets. They come in two varieties: StatelessWidget and StatefulWidget.

A StatelessWidget is a widget that describes part of the user interface that may be configuration dependent but not state dependent. In other words, it describes what the UI looks like given its current configuration. StatelessWidget is immutable, which means that once its values ​​are set, they cannot be changed.

On the other hand, a StatefulWidget is dynamic. State is information that (1) can be read synchronously when the widget is built and (2) can change during the lifetime of the widget. It is an implementation of a widget that may change over time. For example, if a widget has a counter that increments each time the user taps a button, the counter's value is the state.

In Flutter, almost everything is a widget. This includes alignment, padding, layout, etc. They follow a very strong compositional philosophy, which means that you can combine several small widgets together to form a more complex widget. Widgets are organized in a widget tree.

There are many types of widgets in Flutter, but they are commonly divided into two types: layout widgets and UI widgets. Layout widgets like Container, Padding, Column, Row, etc. do not provide a visually noticeable UI. Instead, they control how child widgets are arranged or rendered in the application.

Continue in our app.
  • Listen to the audio with the screen off.
  • Earn a certificate upon completion.
  • Over 5000 courses for you to explore!
Or continue reading below...
Download App

Download the app

UI widgets such as Text, RaisedButton, FlatButton, etc. provide a visually perceptible UI. They are often used in conjunction with layout widgets to create the application's structure and user interface.

The widgets in Flutter are very powerful and allow you to create complex and beautiful user interfaces with little code. They are the foundation of all Flutter apps and are the main way to build and organize the user interface.

To create a widget in Flutter, you need to define a new class that extends StatelessWidget or StatefulWidget. Next, you must implement the build method, which is called whenever Flutter needs to render the widget. The build method should return a new widget object that Flutter can render to the screen.

An example of a simple widget would be a text widget. To create a text widget you can do the following:

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

This is a very simple example, but it shows how widgets are built in Flutter. You define a new class that extends StatelessWidget, implement the build method, and return a new Text widget that Flutter can render to the screen.

In short, widgets are the foundation of all Flutter apps. They are powerful and allow you to create complex and beautiful user interfaces with little code. If you're just starting to learn Flutter, I recommend you spend some time understanding how widgets work, as they are a fundamental part of Flutter.

Now answer the exercise about the content:

What is a widget in Flutter and how is it created?

You are right! Congratulations, now go to the next page

You missed! Try again.

A widget in Flutter is a class that extends StatelessWidget or StatefulWidget and implements the build method. This method is essential as it returns a widget that Flutter can render to the screen. The creation of a widget involves defining a new class extending either StatelessWidget or StatefulWidget, implementing the build method, where the UI is described, and ensuring the class returns the widget object for rendering.

Next chapter

Widgets in Flutter: Introduction to Flutter and Dart

Arrow Right Icon
Free Ebook cover How to create apps from scratch to advanced using Flutter and Dart complete course
27%

How to create apps from scratch to advanced using Flutter and Dart complete course

5

(4)

267 pages

Download the app to earn free Certification and listen to the courses in the background, even with the screen off.