FLUTTER Widgets
FLUTTER
In Flutter, widgets are the basic elements of the user interface. Almost everything is a widget, from layout elements like rows and columns to visible elements like text and buttons.
Flutter Widgets
➔ Widgets are UI elements used to create user interfaces, describing what the visual display will look like in their current configuration and state.
➔ Some widgets have a functional existence even though they have no visible form to the user, For example, layout widgets such as rows, columns, etc. These are used to arrange other widgets according to specific design rules.
Creating Widgets
➔ The code bellow states that a new widget called MyApp is created by extending StatelessWidget. It is worth noting that the derived class of StatelessWidget only needs to implement one build method. The build method accepts the context environment required to build the widget through its parameter BuildContext and returns the widget when the build process is complete.
➔ MyApp is a StatelessWidget and therefore cannot manage any state itself. Since this widget only sets up the application theme and initial page, it is designed as a stateless widget. This MyApp widget will act as the root widget of the application.
Code:
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root widget this application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo Application in Flutter',
mytheme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.deepPurple)),
home: const MyHomePage(title: 'Home Page for demo App'),
);
}
}
Types of widgets
There are various types of widgets available in the Flutter framework. Widgets can be divided into multiple categories based on their features and uses.
Platform specific widgets
Flutter provides a lot of widgets for both Android and iOS platforms.
Android-specific: Android-specific widgets are designed to adhere to the Material Design guidelines and standards of the Android OS. The Android-specific widgets provided by Flutter are called Material Widgets.
AlertDialog, AppBar, BottomNavigationBar, ButtonBar, Checkbox, Date & Time Pickers, DropdownButton, FlatButton, FloatingActionButton, IconButton, ListTile, PopupMenuButton, Radio, RaisedButton, Scaffold, SimpleDialog, Slider, Switch, TabBar, TabBarView, TextField etc.
iOS-specific: iOS-specific widgets are designed to adhere to Apple's Human Design Guidelines and standards. The iOS-specific widgets provided by Flutter are called Cupertino widgets.
CupertinoActionSheet, CupertinoActivityIndicator, CupertinoAlertDialog, CupertinoButton, CupertinoDatePicker, CupertinoDialog, CupertinoDialogAction, CupertinoFullscreenDialogTransition, CupertinoNavigationBar, CupertinoPageScaffold, CupertinoPageTransition, CupertinoPicker, CupertinoPopupSurface, CupertinoSlider, CupertinoTabBar, CupertinoTabScaffold, CupertinoTabView, CupertinoTextField, CupertinoTimerPicker etc.
Layout Widgets
Flutter comes with several built-in layout widgets. A composite widget can be created using one or more widgets. Instead of creating several widgets each time they are needed, the developer creates a single composite widget that acts as an entity and can be reused when needed and applicable. Flutter provides layout widgets like Row, Column, Center, etc. to include multiple widgets into a single widget. For example, the Column widget arranges elements into columns.
The most common widgets
Platform-independent: Flutter has a lot of basic widgets for creating user interfaces, which are platform-neutral and can be used independently anywhere.
AnimatedBuilder, AnimatedContainer, AnimatedOpacity, AssetImage, Card, CircularProgressIndicator, Column, Container, Divider, ElevatedButton, Expanded, GestureDetector, GridView, Icon, Image, InkWell, LayoutBuilder, ListView, MediaQuery, PageView, Placeholder, Row, SingleChildScrollView, SizedBox, SnackBar, Stack, Switch, Text, TextButton etc.
Some common layout widgets are given below.
Center: Creates and arranges space in the center for its child widget.
Column: Arrange its children vertically or in columns.
Container: A rectangular box for holding another element, decorated with a background, border, and shadow using the BoxDecoration widget.
Row: Arranges its subordinate elements horizontally or in a row.
Stack: Arrange child elements one on top of the other, like a pile.
Stateless widget or stateful widget.
➔ In Flutter, all widgets are derived from either stateless widgets or stateful widgets, and therefore every widget in Flutter can be classified as stateful or stateless.
➔ Widgets derived from StatelessWidget do not have any state information to maintain, but they can have widgets derived from StatefulWidget that can maintain their own state.
➔ If a widget or element needs to change its view and re-render to update it, the widget must be a stateful widget, otherwise stateless.
Widget Tree.
➔ Flutter applications are designed and structured like a widget tree, with parent nodes and child nodes.
➔ This is a hierarchical structure, where parent widgets contain and manage child widgets.
➔ For example, a scaffold node might contain an appbar and a body widget, where the body widget can be thought of as the parent of the column widget inside it, and a column containing multiple text widgets can act as the parent of all elements inside it. This is how a complex user interface is designed and a large widget tree is formed.