In Flutter, widgets can be grouped into multiple categories based on their features, as listed below −

• Platform-specific widgets

• Layout widgets

• State maintenance widgets

• Platform independent/basic widgets

Platform-Specific Widgets in Flutter

Flutter provides widgets tailored to specific platforms - Android and iOS, each adhering to their respective design guidelines.

Android-specific widgets, known as Material widgets, follow Google's Material Design guidelines. They offer a cohesive look and feel consistent with Android apps. Some commonly used Material widgets include:

• Scaffold

• AppBar

• BottomNavigationBar

• TabBar

• TabBarView

• ListTile

• RaisedButton

• FloatingActionButton

• FlatButton

• IconButton

• DropdownButton

• PopupMenuButton

• ButtonBar

• TextField

• Checkbox

• Radio

• Switch

• Slider

• Date & Time Pickers

• SimpleDialog

• AlertDialog

On the other hand, iOS-specific widgets, referred to as Cupertino widgets, adhere to Apple's Human Interface Guidelines, providing a native iOS experience. Notable Cupertino widgets include:

• CupertinoButton

• CupertinoPicker

• CupertinoDatePicker

• CupertinoTimerPicker

• CupertinoNavigationBar

• CupertinoTabBar

• CupertinoTabScaffold

• CupertinoTabView

• CupertinoTextField

• CupertinoDialog

• CupertinoDialogAction

• CupertinoFullscreenDialogTransition

• CupertinoPageScaffold

• CupertinoPageTransition

• CupertinoActionSheet

• CupertinoActivityIndicator

• CupertinoAlertDialog

• CupertinoPopupSurface

• CupertinoSlider

Layout widgets

In Flutter, a widget can be created by composing one or more widgets. To compose multiple widgets into a single widget, Flutter provides a large number of widgets with layout features. For example, the child widget can be centered using the Center widget.

Some of the popular layout widgets are as follows −

• Container − The Container widget is a versatile layout widget that creates a rectangular box with customizable properties. Developers can decorate the container with various visual effects such as background color, border, and shadow using the BoxDecoration widget.

• Center −As the name suggests, the Center widget is used to center its child widget within the available space. It is particularly useful for ensuring that a single widget or a group of widgets appears centered on the screen.

• Row − The Row widget is used to arrange its children's widgets in a horizontal direction, from left to right. Developers can specify alignment, spacing, and constraints for the row layout, allowing for precise control over the arrangement of widgets.

• Column − Similar to the Row widget, the Column widget organizes its children widgets in a vertical direction, from top to bottom. It facilitates the creation of vertically stacked layouts, commonly used for displaying lists of items or segmented content.

• Stack − The Stack widget allows developers to overlay widgets on top of each other, creating a layered effect. Widgets placed within a stack can be positioned relative to each other using properties like alignment and positioning.

State Maintenance in Flutter

In Flutter, managing the state of an application is crucial for creating dynamic and interactive user experiences. State maintenance widgets play a key role in handling the dynamic behavior of widgets and updating their appearance in response to user interactions.

1. StatelessWidget vs. StatefulWidget:

   • Widgets in Flutter can be classified into two main categories: StatelessWidget and StatefulWidget.

   • StatelessWidget: These widgets are immutable and do not maintain any internal state. They only render based on the information provided to them at the time of creation.

   • StatefulWidget: On the other hand, StatefulWidget widgets are mutable and can maintain their internal state. They can be updated and re-rendered based on changes to their state.

2. Dynamic Behavior and State Changes:

   • Stateful widgets enable developers to create interactive UI components that respond to user input and events.

   • When a user interacts with a Stateful widget, such as by tapping a button or entering text into a text field, the widget's internal state can change.

   • For example, a counter button widget might increase or decrease its internal count value in response to user taps.

3. Reactive UI Updates:

   • The reactive nature of Flutter widgets ensures that changes in widget state trigger automatic re-renders of the widget tree.

   • When the state of a Stateful widget changes, Flutter automatically rebuilds the widget and its child widgets to reflect the updated state.

   • This reactive behavior eliminates the need for manual UI updates and ensures that the application's user interface remains in sync with its underlying state.

4. State Management Strategies:

   • In more complex applications, managing state becomes increasingly important and may require adopting state management patterns and libraries.

   • Flutter provides various state management solutions, including built-in mechanisms like setState() for simple cases, as well as third-party libraries like Provider, Riverpod, and Bloc for more advanced scenarios.

Platform independent/basic widgets

Flutter provides a large number of basic widgets to create simple as well as complex user interfaces in a platform-independent manner. Let us see some of the basic widgets in this chapter.

Text

A text widget is used to display a piece of string. The style of the string can be set by using the style property and TextStyle class. The sample code for this purpose is as follows −

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

Text widget has a special constructor, Text.rich, which accepts the child of type TextSpan to specify the string with different style. TextSpan widget is recursive in nature and it accepts TextSpan as its children. The sample code for this purpose is as follows −

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Image

Image widget is used to display an image in the application. Image widget provides different constructors to load images from multiple sources and they are as follows −

• Image − Generic image loader using ImageProvider

• Image.asset − Load image from flutter project’s assets

• Image.file − Load image from system folder

• Image.memory − Load image from memory

• Image.Network − Load image from network

The easiest option to load and display an image in Flutter is by including the image as assets of the application and load it into the widget on demand.

• Create a folder, assets in the project folder and place the necessary images.

• Specify the assets in the pubspec.yaml as shown below −
  flutter: assets: - assets/smiley.png

• Now, load and display the image in the application.
  Image.asset('assets/smiley.png')

• The complete source code of MyHomePage widget of the hello world application and the result is as shown below −.
  
  

  class MyHomePage extends StatelessWidget {
     MyHomePage({Key key, this.title}) : super(key: key); 
     final String title; 
  
     @override 
     Widget build(BuildContext context) {
        return Scaffold( 
           appBar: AppBar( title: Text(this.title), ), 
           body: Center( child: Image.asset("assets/smiley.png")),
        ); 
     }
  }

Icon

The icon widget is used to display a glyph from a font described in IconData class. The code to load a simple email icon is as follows −

Icon(Icons.email)

The complete source code to apply it in Hello World application is as follows −

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}