Widgets That Every Flutter Developers Needs to Know

In my previous article, I talk about object oriented programming with dart programming language for flutter. (Here it is the link for those who haven’t read it: Dart Programming Language Basics. What is Dart? Dart is an… | by Melike Balpınar | Jul, 2022 | Medium )

This article I will talk about the 4 widgets in flutter every developer needs to have an idea about it.

Letter on we gonna work with other stuff now just we will cover on widgets

What is widgets, Why we need to use that?

Widgets are basic building blocks which is central class hierarchy of the flutter application’s framework, that define the look(part of the user interface) of your app according to its states and configurations.

We need to use widgets because widgets done to determine the minimum state changes required for the base rendering tree to move from one state to another (which manage the underlying render tree).

Lets jump into some of the powerful Flutter widgets we need to know before start the develop a new flutter application.

Before start the widgets some useful informations;

Stateless and Stateful Widget:

Stateful widget is a dynamic widget, which can change over time the look(interface) in response to events (state object) triggered by the user interactions or when the program receives any data.

Here it is code examples of the stateful widgets:

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Instead of the stateful widgets, stateless widgets never changes.

Stateless widget is a widget that shows us part of the user interface by building a constellation of other widgets that shows us the user interface more concretely.

Here it is code examples of the stateless widgets:

void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
    return Container();
}}

Here it is some examples of the stateful widgets:

• CheckBox
• Radio Button
• Slider
• InkWell
• Form
• TextField

Some examples of the stateless widgets:

• Icon
• Icon Button
• Text (read only)

SafeArea Widget:

Now a days apps rarely get a neat little rectangles to run in. For example notification bar and controls can creep in and rounded corners & notches nip at our content. That’s why flutter has a safeArea widget.

We need to use MediaQuery to check the dimensions of the devices screen and pads its shell to match also we can wrapping body of scaffold. Here it is some code examples:

Future and Stream Builder Widget:

Modern apps today is highly asynchronous using this anything can happen on the app any time. We can think like this events as streams of data so StreamBuilder will listen to flows of events from the streams. For the each new created event will rebuild the sentences.

Expanded Widget:

Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g. horizontally for a Row or vertically for a Column).

If multiple children are expanded, its little bit tricky one, the available space is divided among them according to the flex factor.

Expanded widget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets.

Flexible Widget:

Flexible widget which is controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.

More useful examples: