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:
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
Reading your article helped me a lot and I agree with you. But I still have some doubts, can you clarify for me? I’ll keep an eye out for your answers.
Thanks for your feedback. You can post your questions here and i’d be more than happy to clear things out for you. 😊