Flutter: Widgets for Starter #2
By: Jan Salvador Sebastian
Tags: Google, Flutter App Development, Flutter Widget, Flutter, Dart

So, we’re back to our Flutter: Widgets for Starter! Now, we’re here for the next part! Just a recap from Flutter: Widgets for Starter Part 1.

Introduction to Flutter Widgets

Text Widget

Container

Column

Row

Expanded

If you missed the article, here’s the link for you! 💙💙💙

Let’s start for Part 2! Are you excited guys?!

GIF by Hannah by giphy

1) Button Widget

In Flutter, Button Widgets are common needs by the users. Flutter has also had several types of buttons like FlatButton, RaisedButton, OutlineButton, and more buttons!

We will tackle buttons for a lot for this session!

Flat Button Raised Button Outline Button Icon Button Floating Action Button

1.1) Flat Button

In Flutter Documents, A material design “flat button”. A flat button is a text label displayed on a (zero elevation) Material widget that reacts to touches by filling with color.

Read more: Flat Button from Flutter Documents.

1.2) Raised Button

In Flutter Documents, A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

Read more: Raised Button from Flutter Documents.

1.3) Outline Button

In Flutter Documents, A medium-emphasis button for secondary actions that are important but are not the primary action in an app.

Read more: Outline Button from Flutter Documents.

1.4) Icon Button

In Flutter Documents, An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

For the Icons, A graphical icon widget drawn with a glyph from a font described in an IconData such as the material’s predefined IconData in Icons.

You could read more about icons here.

Read more: Icon Button from Flutter Documents.

1.5) Floating Action Button

In Flutter Documents, A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Read more: Floating Action Button from Flutter Documents.

That’s all for the Buttons! So, let’s proceed to Text Inputs.

2) Text Field

In Flutter, the text field allows us to use to get our inputs. They are used to build messages, search, or other inputs in our applications.

In TextField widget, We also can add decoration like putting outline or inline border, radius, and more things that can be decorated with styles!

Read more: TextField from Flutter Documents.

In Additional to TextField Widgets. We will be adding these subjects to this article.

onChanged

onSubmitted

Controller

TextFormField

2.1) TextField: onChanged

In Flutter Documents, when the user initiates a change to the TextField’s value: when they have inserted or deleted text.

Read more: onChanged from Flutter Documents.

2.2) TextField : onSubmitted

In Flutter Documents, when the user indicates that they are done editing the text in the field.

Read more: onSubmitted from Flutter Documents.

2.3) TextField: Controller

In Flutter Documents, Controls the text being edited.

Read more: Controller from Flutter Documents.

2.4) TextFormField

In Flutter Documents, A FormField that contains a TextField. This is a convenience widget that wraps a TextField widget in a FormField.

A Form ancestor is not required.

The Form simply makes it easier to save, reset, or validate multiple fields at once.

As you can see from the code, we have onSaved and validator.

onSaved — An optional method to call with the final value when the form is saved via save from FormState.

validator — An optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.

So, That’s all for today’s session! I hope you learn something new today!

Also, I want to thank the Flutter for the best Documents! You could read more in advance at this link.