Forms in Flutter
Today, I’ll give some examples for creating forms in flutter. If you don’t know Flutter, you can start in here. The Flutter is a mobile SDK for creating mobile applications by fast. It can craft a application on iOS and Android devices with one code and this framework has full native performance!
A good news!
Flutter is in beta. Do not worry about beta because when Flutter in alpha, it used applications in production by Google. These applications downloaded and used by millions. Yes, Flutter is Google mobile UI Framework. Flutter using Dart language. It’s like Typescript or Javascript (my idea). And in the beta version, you can use Dart v2 in Flutter. I updated Flutter version in my computer using by this document. It’s easy.
Flutter has widgets for UI and we use Form and Field widgets today for creating a log in form. So first you need to look Flutter input widgets page. It has Form widget and FormField widget.
First, let’s create a Flutter project and cleanup starter project codes in main.dart file. Next, create a LoginPage class and _LoginPageState class in main.dart file. And add a appbar and sample text for showing the application.
Let’s look my code in this step.
Let’s give it a shot.
Now, we are ready to add a form in this page. Let’s create a Form but be careful because we need a key for this Form because we will use this widget state in our class. So if you look at the Form Widget documents we have key property. So, we can use this for giving id of widget.
Now, we are ready to using this form but we need a class for passing your field values. So, let’s create a _LoginData class with email and password properties. And add our field widgets and a submit button.
Yes, we have UI components now. Let’s give it a shot.
It’s cool. So we have UI components now but we have not any data or functionality for log in process. So, first we should validate this inputs for taking correct value. Flutter FormField widget has validator property. It’s so simple. This property need a function which return error string or null. And this function taking a input which is value of form field. So, we have 2 inputs which are email and password. I’m creating a two function for validating these fields and I’m using validate package for checking the value.
Yes, we have validation functions now. So, we can validate the fields and save these field values to LoginData class. Finally, we need to add a handler function for submit button. We need to validate our form in this function and if everything okey, we can send our data where you want.
Let’s give it a shot.
If you enter correct values, you can see this data in console.
That’s good.
Source: https://flutter-news.com/tutorials/forms-in-flutter.4
