Understanding the Role Widgets Play in Flutter Code

That Flutter is an awesome tool for building beautiful mobile apps is an understatement. There are several instances to prove this assertion. For example, Flutter, Google’s newest open source code is a mobile application code that showcases widgets.

There are unique widgets for everything in Flutter from screen layouts to buttons and simple text, Flutter widgets are in hierarchical arrangement to be displayed onto the screen. In Flutter, there are Container Widgets and there are Text Widgets. The former are widgets which can hold other widgets inside themselves while the latter are widgets which projects texts on the screen to the reader. Text widgets carry out a minimum job which is to display texts on the screen. Except for text widgets, all other widgets in Flutter are layout widgets.

A Container Widget can be referred to as Directionality if together with Text Widget, it helps the developer to display some certain texts on the screen of a mobile device. For example, if a developer wants to write ‘’Welcome to Flutter’’ in code to be displayed on the screen, the following steps are necessary:

Write a code in Dart with a Container Widget with the sub widget ‘’Text’’ to display the expected text ‘’ Welcome to Flutter.’’ Here is how the code should look like:

import ‘package: flutter/material.dart’;

void main ( ) = runApp(new MyApp ( ) );

class MyApp extends SatelessWidget   {

@ override

Widget build (BuildContext ctxt) {

Return new Directionality (

textDirection: TextDirection.ltr,

child: new Text (‘’Welcome to Flutter’’)




With the Flutter code above, the execution starts from the main function ( ) while MyApp is the widget created for the purpose of building the screen layout. Also, the MaterialApp is the Flutter for creating material design. The material design enables the developer to create Application Bar and Body for the code. Since the screen consists of several widgets, the need to use a widget as a child for the expected display of ‘’Welcome to Flutter’’ becomes imperative. Row and Column in Flutter code allows this to be achieved. Also, the row and column allow the multiple widgets to be displayed in such a way as to change the widget hierarchy.

Another interesting thing about Flutter is that two types of widgets can be created: stateless and stateful widgets. Stateless widgets have reloading problems unlike stateful widgets that don’t have such problems.