6.2. Widgets in Flutter: Basic structure of a Flutter application

Widgets are the fundamental building blocks of the user interface in Flutter. They describe how your interface should appear, given current settings and state. Each widget is an immutable piece of user interface that is inflated (that is, drawn) on the screen. When you make changes to the widget's code, the widget is re-inflated and redrawn. Therefore, widgets are very important in Flutter and are the foundation of everything you create.

In Flutter, almost everything is a widget. From the application itself to buttons, cards, navigation bars, etc. Widgets are nested within other widgets to form their UI. For example, you might have a navigation bar widget that contains button widgets.

To better understand the structure of a Flutter app, let's start with the basic structure of a Flutter app. A basic Flutter app consists of a widget tree, which is built from a single root widget. This root widget is usually a MaterialApp or CupertinoApp widget, which provides a lot of basic app functionality like navigation, themes, etc.

MaterialApp and CupertinoApp

MaterialApp is a widget that encapsulates various widgets that are commonly needed by applications that implement Material Design, such as Scaffold, AppBar, etc. It also sets up a Navigator, which can manage a stack of Route widgets that you can "push" and "pop".

CupertinoApp is similar to MaterialApp, but implements an Apple-specific design. It also encapsulates several widgets that are commonly needed by applications that implement Apple's design.

Depending on the type of app you are building, you can choose to use either MaterialApp or CupertinoApp as your root widget.

Scaffold

After choosing your root widget, the next widget in the tree is usually a scaffold. Scaffold is a convenient widget that implements the basic visual structure of Material Design. It provides a framework for displaying the AppBar, Drawer, BottomNavigationBar, FloatingActionButton, and body content.

AppBar

AppBar is a widget that provides an application bar. It can contain a title, action icons, a menu icon, and more. You can customize the AppBar in many ways to suit your needs.

Body

The body of the Scaffold is where you place the main content of your application. You can fill the body with any widget you like. Typically, you'll use widgets like ListView, GridView, Stack, etc. to organize your content widgets.

Drawer and BottomNavigationBar

Drawer and BottomNavigationBar are widgets that provide navigation for your application. Drawer provides a sliding panel that can contain a list of menu options, while BottomNavigationBar provides a navigation bar at the bottom of the screen with items that can be tapped.

FloatingActionButton

FloatingActionButton is a circular button that floats above the body content. It is typically used for a main action in the application, such as adding a new item.

This is the basic structure of a Flutter app. Of course, the structure of your application can be much more complex, depending on your needs. The important thing is to understand that everything in Flutter is a widget and that you build your UI by nesting widgets inside other widgets.

Stateless and Stateful widgets

Widgets in Flutter are of two types: Stateless and Stateful. Stateless widgets are those whose state cannot change over time, while Stateful widgets are those whose state can change over time.

A Stateless widget is described by a class that inherits from StatelessWidget. It describes part of the user interface that may depend on settings defined during construction and may not change over time.

A Stateful widget, on the other hand, is described by two classes: a class that inherits from StatefulWidget and another class that inherits from State. The StatefulWidget object is itself immutable, but the State object persists for the life of the widget.

In short, the basic structure of a Flutter app is built from a tree of widgets, starting with a MaterialApp or CupertinoApp root widget, followed by a Scaffold that provides the basic visual structure, and then populating the Scaffold with various widgets such as AppBar, Drawer, BottomNavigationBar, FloatingActionButton, and body content. Each widget is immutable and is inflated on the screen. When you make changes to the widget's code, the widget is re-inflated and redrawn. Therefore, widgets in Flutter are very important and are the foundation of everything you create.

Next page of the Free Ebook:

75Widgets in Flutter: Basic Widgets in Flutter

3 minutes