Introduction To Flutter Widgets – Basic Widgets

Generally speaking, widgets are the the building blocks of any Flutter app UI. In this post, we’ll learn how to use the basic widgets in Flutter to build a simple UI. We’ll cover 6 different types of Flutter widgets that will help you get started with learning Flutter. Some of these widgets are visible widgets such as text views, images, icons, etc, while other widgets are invisible and are considered layouts widgets like Scaffold which will be covered in a later post. In this post, we’ll learn how to use the basic widgets in Flutter to create a Sign-in UI.

To begin with,  take note that I’m using a Column layout as the parent widget in order to display multiple widget in the UI. If you’re not familiar with Column layout, it’s suggested that you first learn how to use Column widget before you start reading this post.

Text

Text widget displays a string of text of single style which you may modify to meet your design requirement. This widget is absolutely used in every single app out there so it’s essential to learn how to use it to meet your design requirements.

Moreover, Text widget takes various properties that you can use to change its appearance and handle its content. These properties include the following:

  • String: specifies the data in the text widget.
  • style: this is to modify the style of the text including its font size, color, weight, etc.
  • textAlign: specifies how to align the text horizontally.
  • textDirection: this is to choose the order of the text. For example, TextDirection.rtl to arrange the text order from right to left.
  • maxLines: specifies the maximum number of lines within the text widget. If the text exceeds the number of lines specified, it will be truncated according to the overflow property.
  • overflow: specifies how to handle visual overflow. There are several ways to handle text overflow such as ellipsis, fade, and clip. Below are examples of each of the for you to understand the difference:
Flutter widgets
Text overflow – Difference
 

Example

 

Center(
child: Text(
'Welcome to Dania\'s Blog',
maxLines: 1,
style: TextStyle(
decoration: TextDecoration.none,
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.indigo,
),
),
),

Output

Flutter Widgets
Flutter Widgets – Text

Oh hi there!
It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

Let's Do This!

2 thoughts on “Introduction To Flutter Widgets – Basic Widgets

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top