What is Flutter?

Flutter is Google’s free and open-source cross-platform mobile application framework that was released in 2017.

Flutter uses Dart programming language and is based on the concept of building native applications for Android, iOS, web, and desktop. Flutter is built on top of the existing frameworks of the respective platforms.

Flutter gives developers an easy way to build and deploy visually appealing, mobile, web, and desktop applications using the same codebase.

What is a Widget?

Whenever you navigate to a website, you can view a whole lot of visual items such as a search box or a chat bot. Clicking on the item will navigate you to the information you require.

Thus, widget is an element or a “mini-app” that displays a small amount of information on screen at all times and interacts with the user.

What are Widgets in Flutter and why are they important?

Flutter widgets are small pieces of code that allow developers to create rich user interfaces. They are similar to HTML elements, except they run inside a native application framework.

Widgets are designed to make developing cross-platform mobile applications easier. It includes controls like buttons, switches, sliders, text fields, pickers, and date/time pickers.

Flutter widgets are built using a modern framework that takes inspiration from React, allowing you to build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.

When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.

Flutter gives a list of widgets to the user for specific purposes like text, Container, Scaffold, row, column, AppBar, logo, Icons.

Commonly used Flutter Widgets and their Uses

Text Widgets

The ‘Text’ widgets lets you create a run of styled text within your application. Three types of Text Widgets are DefaultTextStyle, RichText and Text.

The DefaultTextStyle is applied to text styles without an explicit style. The RichText widget displays text that uses multiple different styles.

The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree.

The Text Widget displays a string of text with single style.

Cupertino

Cupertino is a class of iOS style widgets used to develop visual user interface for iOS devices.

Some of these widgets include CupertinoDatePicker, CupertinoActionSheet, CupertinoButton, CupertinoContextMenu, CupertinoDialogAction etc.

Material Components

Material Components are interactive Flutter building blocks for creating a visual, behavioral and motion-rich user interface.

They are used to implement layout, information display, buttons, inputs, selection, app structure and navigation.

Animation and Motion

Both Animation and Motion widgets work hand-in-hand and are used to create an illusion of motion of images, widgets.

Some of these widgets include AnimatedAlign, AnimatedList, FadeTransition, Hero, RotationTransition.