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:

Image

This is a widget that you can use to display an image in Flutter apps. Image widget has several instructors that allow you to add images to your app from different sources. Some of the most used instructors are as follows:

• Image.asset: loads an image for your project’s asset folder
• Image.network: loads an image from the network
• Image.file: loads an image for system’s file
• Image.memory: loads an image from the memory

Usually, the most used image constructor is image.asset and you can achieve this by following the next steps
1. create an asset folder in your project, place your images in that folder, and specify the assets folder in pubspec.yaml file.

flutter: 
   assets: 
      - assets/logo.png

2. add the necessary code in you dart file

Image.asset('assets/logo.png')

Some of the most used properties of image widgets are

• string: contains the name of the image including the folder’s name where it exists. For example ‘assets/logo.png’.
• width and height: specifies the width and height of the image.
• fit: specifies the image fit modes. Image widget has several fit modes such as:
  1. fill – image is stretched fit. BoxFit.fill
  2. Fit Height – adjusts the image fit to occupy the full specified height. BoxFit.fitHeight
  3. Fit Width – adjusts the image fit to occupy the full specified width. BoxFit.fitWidth
  4. contain – keeps the image proportional, minimal as possible. BoxFit.contain
  5. cover – ensures the image covers its whole container. BoxFit.cover
  
• repeat: controls how to handle any portion of the layout which the image doesn’t cover. It has several arguments such as:
  1. no repeat – prevents the image from being repeated. ImageRepeat.noRepeat
  2. repeat – repeats the image in both x and y directions until the box is filled. ImageRepeat.repeat
  3. repeatX – repeats the image in x direction only until the box is horizontally filled. ImageRepeat.repeatX
  4. repeatY – repeats the image in y direction only until the box is vertically filled. ImageRepeat.repeatY

Furthermore, if you want to be more creative with images, you can also place in image in a BoxDecoration within a container to play around with its shape using the DecorationImage property.

Example

Container(
  //padding: EdgeInsets.only(top: 30),
  width: 100,
  height: 100,
  decoration: BoxDecoration(
      shape: BoxShape.circle,
      image: DecorationImage(
        image: AssetImage('assets/logo.png'),
      )

  ),
),

Output

TextField

Text Field widget allows you to get an input from the user such as email, name, password, etc. By default, text field is decorated to be underlined, but you can always add some decoration to it to play around with its appearance.

Some of the most used properties within the TextField are:

• autoCorrect: enables auto correction for user’s input and it takes a boolean value as true or false.
• controller: handles the text input and it takes a TextEditingController argument. TextEditingController allows you to keep track of the value being typed into the TextField and add listener to it. Once you create the TextEditingController and apply it to the TextField, you can create methods to handle the user’s input.
  
  

  final controller = TextEditingController();

  TextField(
    controller: controller,
  )

  void printTextFieldValue() {
    print('TextField Value: ${controller.text}');
  }

• decoration: modifies the decoration around the TextField and it takes an argument of type InputDecoration. withing this argument, you can specify the border, hint text, label, etc.
• enabled: if it’s set to false, the text field will be disabled and the user won’t be able to type input and vice versa.
• keyboardType: specifies the type of keyboard to use for editing the text. For example, TextInputType.emailAddress, TextInputType.phone, TextInputType.number, and so on.
• maxLength: specifies the maximum number of characters the user can input.
• maxLines and minLines: the maximum or minimum number of lines to show at one time.
• onChanged: a method used to handle the event when the user changes the value entered.
• onSubmitted: a method which is called when the user finish editing the text
• obscureText: if set to true, the text will be invisible. You can use obscureText when you want password field to be invisible to the user.

Example

In our example, we’ll add two text fields. The first text field is for email address while the second is for password.

Padding(
  padding: const EdgeInsets.all(20.0),
  child: TextField(
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Email',
      hintText: 'example@gmail.com'
    ),
  ),
),
Padding(
  padding: const EdgeInsets.all(20.0),
  child: TextField(
    obscureText: true,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Password',

    ),
  ),
),

Output

Button

Buttons enable you to add actions to your app when the user clicks on them to add more responsiveness and interaction. Flutter provides several types of button widgets and the newest buttons are TextButton, ElevatedButton, and OutlinedButton.
Basically, the difference between the three types of buttons is their appearance.

• TextButton: By default, it is a button with only a text and has no borders or background

  

  color.
• OutlinedButton: This button is similar to TextButton but has a border by default.
• ElevatedButton: This button is the most  attractive button as it has border and background color by default.

Now despite that these buttons have default style, you can always apply more creative styles using the ButtonStyle property.

Furthermore, some of the most common properties of Flutter Button widget are:

• onPressed: a method to handle the action to be taken when the user clicks the button.
• style: to apply different styles to the button such as color, border, shape, etc.
• child: specifies what widget to display within the button. This can include text or icons.

Example

Container(
  width: 150,
  height: 50,
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
        primary: Colors.indigo,
        textStyle: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold
        )
    ),
    child: Text(
        'Sign in'
    ),
  ),
),

Output

Icon

Icon widget is like as a container to store an icon. Icons are usually specified using their names which can be found here. Within the icon widget, you can add different properties such as size and color.

In this example, we’ll use icon widget inside the sign in button. To achieve this, first we’ll wrap the previous ‘Sign in’ text widget in a row then add the Icon widget after the Text widget.

Icon(
  Icons.login,
  color: Colors.white,
),

Output

In fact, Icon is usually not clickable but fortunately, Flutter provides IconButton which you can use to add clickable buttons to your app. Icons buttons are commonly used in the app bar, but you can use them anywhere you want. Some of the important properties of Icon Button are:

•  icon: takes an icon widget to specify what icon to display.
• onPressed: a method which is called whenever the icon button is used.
• color: specifies the color of the icon inside the button.
• alignment: specifies how to position the icon within the button.
• hoverColor: specifies the color of the button’s icon whenever the pointer is hovering over it.
• iconSize: specifies the icon size within the button
• padding: specifies the padding around the button’s icon. You can set the padding using EdgeInsets property. For Example, EdgeInsets.all() to set the padding to all sides.
• toolTip: the text that describes what happens when the user clicks the icon button.

Example

IconButton(
    onPressed: () {},
    icon: Icon(Icons.star),
  color: Colors.red,
  padding: EdgeInsets.all(20),
  iconSize: 60,
  hoverColor: Colors.black54,
  tooltip: 'This is action description',

),

Conclusion

To summarize, we’ve learned the basic Flutter widgets which are usually used in every app. It’s important to realize that you should always keep practicing and trying different things to optimize your learning and get the most out of these lessons. Now that you you know the basic widgets you are ready to learn more about Flutter layouts, understand the difference between Column and Stack layouts, and learn how to build a creative UI using Stack.