

Dart is a very powerful and robust modern programming language. But still, there are some features like the Data classes and the Sealed classes that are integral to modern-day development but are not currently present, resulting in writing a lot of boiler-plate to implement simple things like comparing two objects of the same class and exhaustive switches. 

## What is a Data Class?
While building apps we have to deal with a lot of data. We need to transfer data to and from different layers of our app. 
For example, consider the data related to a User. Among other things, the user may have a username, an email, and a profile picture URL associated with it. It makes no sense to transport these values among the different app layers as individual loose values. Instead, we should create a class that bundles all of the related data fields and use the resulting object for the data transfer.
```dart
class User {
 final String userName;
 final String email;
 final String imageUrl;
 
 const User({
   required this.userName,
   required this.email,
   required this.imageUrl,
 });
 ```
 
 This kind of class is referred to as a data class. But just having a regular class for this purpose is not enough.
 
A data class should have these features:
1. An over-ridden equality operator so that we can compare objects based on their values instead of reference. Dart by default supports referential equality and not value equality.
2. A copyWith method that facilitates deep copying or cloning
3. An over-ridden toString method that makes debugging easy.

Taking care of all these properties and creating data classes manually would take a lot of time and make the file containing our class quite messy and more susceptible to errors and this is where freezed comes in.

#### Without Freezed
```dart
@immutable
class User {
 final String userName;
 final String email;
 
 const User({
   required this.userName,
   required this.email,
 });
 
 @override
 String toString() => 'User(userName: $userName, email: $email)';
 
 @override
 bool operator ==(other) =>
     other is User &&
     other.runtimeType == runtimeType &&
     other.userName == userName &&
     other.email == email;
 
 @override
 int get hashCode => Object.hash(runtimeType, userName, email);
 
 User copyWith({String? userName, String? email}) => User(
       userName: userName ?? this.userName,
       email: email ?? this.email,
     );
 
 factory User.fromJson(Map<String, dynamic> json) => User(
       userName: json['userName'] as String,
       email: json['email'] as String,
     );
 
 Map<String, dynamic> toJson() => {
       'userName': userName,
       'email': email,
     };
}
```
#### With Freezed
```dart
@freezed
class User with _$User {
 const User._();
 const factory User({
   required this.userName,
   required this.email,
 }) = _User;
 
 factory User.fromJson(Map<String, dynamic> json)  => _$UserFromJson(json);
}
```

## What is Freezed?

Freezed allows us to write minimal code by hand and uses code generation to take care of the rest for implementing data classes and unions. (We’ll be explaining about unions in a future article so, fear not.)


## Steps for creating a data class using Freezed

Add all the above mentioned dependencies and dev-dependencies in the `pubspec.yaml`. 
(Note: We can use the flutter pub add `<dependency_name>` command to add them)
```dart
dependencies:
 flutter:
   sdk: flutter
 freezed_annotation: ^2.0.3

dev_dependencies:
 flutter_test:
   sdk: flutter
 build_runner: ^2.1.11
 freezed: ^2.0.3+1
```

Freezed  is used only for code generation, so has to be added as a dev-dependency. `build_runner` needs to be added as a dev-dependency as well since we’re dealing with generating files using Dart code. And at last, `freezed_annotation` needs to be added as a normal dependency in which the annotations are defined for the freezed to generate code.

Create a dart file for the data class (say `user.dart`).

Add the minimal code mentioning just the fields that the user class should contain. 
```dart
part 'user.freezed.dart';

@freezed
class User with _$User {
 const User._();
 const factory User({
   required this.userName,
   required this.email,
 }) = _User;
}
```

The part statement on the top is for linking the generated freezed file, that we’re      going to generate in the next step.
Run the build_runner command. It will generate the freezed file for our data class which will contain all the implementation details for the value equality, copyWith, toString and other aspects of a data class.

```dart
flutter pub run build_runner build
```

## Adding JSON serialization to the data class

JSON is currently the most popular data format which is used in client-server communication. So, extending our data class with JSON serialization and de-serialization capabilities definitely makes sense.

Serializing data to and from JSON is a cake walk with json_serializable package. And, thankfully, freezed has a good integration with it. 

First, we need to add json_serializable as a dev_dependency (for code generation). 
```dart
dev_dependencies:
 flutter_test:
   sdk: flutter
 build_runner: ^2.1.11
 freezed: ^2.0.3+1
 json_serializable: ^6.1.4
 ```

Next, we just need to add a little boiler-plate in order to trigger json_serializable’s generator.
```dart
part 'user.freezed.dart';
part 'user.g.dart';
				
@freezed
class User with _$User {
 const User._();
 const factory User({
   required this.userName,
   required this.email,
 }) = _User;
	
 factory User.fromJson(Map<String, dynamic>      json) => _$UserFromJson(json);
}
```

Just a part statement to link the generated file containing all the Json serialization logic and a one-liner fromJson factory method referencing the class generated by the json_serializable’s generator.
This will generate all the necessary code to call toJson as an instance method and fromJson as a factory.
## What are Unions and how to implement them using Freezed package?
The blog on unions is coming soon….





Freezed allows us to write minimal code by hand and uses code generation to take care of the rest for implementing data classes and unions.

Freezed - Easy data classes and unions



## Flutter Row and Column Widgets 
Column and Row widgets are the most commonly used widgets in Flutter and are used to make application layouts. It's hard to find any app that doesn't use these widgets. Almost every design can be broken down into rows and columns.

So learning these widgets thoroughly is quite essential, as it will make it easier for you to create simple or even complex layouts.

# Let's get started

Overview of Row and Column widgets:
These widgets are multi children widgets with similar behavior and properties. The major difference is a Row widget places its children horizontally, whereas a Column widget places its children vertically. As shown in the following images.

![column](https://user-images.githubusercontent.com/82392526/196350090-5f5e5121-3aea-4431-a0be-f9da71bcc4ca.png)
![row](https://user-images.githubusercontent.com/82392526/196350092-2319489e-1f0b-4b6c-9879-343cfaad2bed.png)


So the following snippet has a Row widget that has three containers in it. Similarly, we can define a Column widget too.

```sh
Row(
 children: <Widget>[
   Container(
     alignment: Alignment.bottomCenter,
     width: 100,
     height: 100,
     color: Colors.teal,
     child: Text(
       'Widget 1',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
   Container(
     alignment: Alignment.center,
     width: 100,
     height: 100,
     color: Colors.indigo,
     child: Text(
       'Widget 2',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
   Container(
     alignment: Alignment.center,
     width: 100,
     height: 100,
     color: Colors.deepOrange,
     child: Text(
       'Widget 3',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
```



 
 
## Properties:

Let’s see how all the properties work for rows and columns. 
 
### 1) MainAxisAlignment and CrossAxisAlignment:

Row and Column widgets have MainAxisAlignment and CrossAxisAlignment properties which decide the position of the children widgets. But before that, let us understand the difference between MainAxis and CrossAxis in all two widgets.
 The row’s mainAxis is horizontal and the crossAxis is vertical, whereas the column’s mainAxis is vertical and the crossAxis is horizontal.

See the below Images to understand it more clearly.

![cross-axis](https://user-images.githubusercontent.com/82392526/196348794-3cf4de9e-827f-4aa3-a4ed-4c92e5f5c7e4.jpeg)
![main-axis](https://user-images.githubusercontent.com/82392526/196348799-b402572a-fa4d-4bfb-a377-442fa84f37f0.jpeg)





#### MainAxisAlignment:

This property positions child widgets along the main axis of the layout.

There are 6 different options available in mainAxisAlignment.
- mainAxisAlignment: MainAxisAlignment.start,
- mainAxisAlignment: MainAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.end.
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- mainAxisAlignment: MainAxisAlignment.spaceBetween,


 
 
 
 
 
MainAxisAlignment.Start: Place the children from the start of the row or column.

![main-axis-start-row]( https://user-images.githubusercontent.com/82392526/196350070-436d11b5-2ff5-45c8-b5da-73f368423dbe.png)
![main-axis-start-column](https://user-images.githubusercontent.com/82392526/196350103-e07a0eef-ac46-4c5b-8e57-daf8d986b32f.png)

 
MainAxisAlignment.end: Place the children at the end of the row or column.
      ![main-axis-end-row](https://user-images.githubusercontent.com/82392526/196350129-da2f8a47-4707-454d-95a3-fdef5315c297.png)
 ![main-axis-end-column](https://user-images.githubusercontent.com/82392526/196350127-b2f22ef6-43e4-4f83-a7e3-4f90958a85e2.png)
 
 
MainAxisAlignment.center: Place the children at the center of the row or column.
 ![main-axis-center-row](https://user-images.githubusercontent.com/82392526/196350123-a84c57f8-134f-4f7e-a67a-f61c482362b4.png)
![main-axis-center-column]( https://user-images.githubusercontent.com/82392526/196350124-141c7bb2-4a92-4379-8792-f3a526cafacd.png)

 
MainAxisAlignment.spaceBetween: Place the space evenly between the children.
 ![main-axis-between-row](https://user-images.githubusercontent.com/82392526/196350121-8b5210cb-1121-4e2d-a217-50f07d2f3dcd.png)
 ![main-axis-between-column](https://user-images.githubusercontent.com/82392526/196350119-05a641b5-c2be-4762-a0b1-4eea740cf822.png)
 
 
MainAxisAlignment.spaceAround:  Place the space evenly between the children and also half of that space before and after the first and last child.
       
 ![main-axis-around-row](https://user-images.githubusercontent.com/82392526/196350118-a3f9820a-b29c-4cf5-ac4e-9ce8521d52d1.png)
 ![main-axis-around-column](https://user-images.githubusercontent.com/82392526/196350116-9e59c3f5-3aab-4b8d-97f3-92f5f18d9332.png)
 
 
MainAxisAlignment.spaceEvenly:  Place the space evenly between the children and also before and after the first and last child.
 ![main-axis-evenly-row](https://user-images.githubusercontent.com/82392526/196350111-aa8702c7-3795-4f10-9c03-fdba6b2d65dd.png)
 ![main-axis-evenly-column](https://user-images.githubusercontent.com/82392526/196350107-2b42d1d2-debf-434a-9e55-b2e776cf21bb.png)






#### CrossAxisAlignment: 
This property positions its child widgets along the crossaxis of the layout.

There are the following options in crossaxisAlignment.

- crossAxisAlignment: CrossAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.end,
- crossAxisAlignment: CrossAxisAlignment.stretch,
- crossAxisAlignment: CrossAxisAlignment.baseline,

CrossAxisAlignment.start: This Places the children from the start of the row or column.
 ![cross-start-row](https://user-images.githubusercontent.com/82392526/196350106-4859581f-5655-441b-8a3e-282d92483c8d.png)
 ![cross-start-column](https://user-images.githubusercontent.com/82392526/196350103-e07a0eef-ac46-4c5b-8e57-daf8d986b32f.png)


 
CrossAxisAlignment.end: This Places the children at the end of the row or column.
 ![cross-end-row](https://user-images.githubusercontent.com/82392526/196350097-7f8b5711-6ccf-425d-953c-0e46a7db0d0e.png)
 ![cross-end-column](https://user-images.githubusercontent.com/82392526/196350096-f34b2158-39ff-41f0-979b-d031cb5ece2d.png)
 
 
CrossAxisAlignment.center: This positions the children such that their centers align with the middle of the cross-axis. By default, the value of crossAxisAlignment is the center.

 ![cross-center-row](https://user-images.githubusercontent.com/82392526/196350092-2319489e-1f0b-4b6c-9879-343cfaad2bed.png)
 ![cross-center-column](https://user-images.githubusercontent.com/82392526/196350090-5f5e5121-3aea-4431-a0be-f9da71bcc4ca.png)
 
CrossAxisAlignment.stretch: This lets the children completely occupy the cross-axis.
 ![cross-stretch-row](https://user-images.githubusercontent.com/82392526/196350088-1eb93bae-c8f8-4629-a679-ab7ace41ff23.png)
 ![cross-stretch-column](https://user-images.githubusercontent.com/82392526/196350084-f03ab729-de71-40c7-999e-767f7535fcbd.png)
 
 
CrossAxisAlignment.baseline: It places its children along the cross axis such that their baseline matches each other. If the main axis is vertical, then it will be treated as crossAxisAlignment.start, because baselines are always horizontal. It basically means that it will work with the Row widget with its direction as horizontal.
```sh
Row(
 crossAxisAlignment: CrossAxisAlignment.baseline,
  children: <Widget>[
   Container(
     alignment: Alignment.bottomCenter,
     width: 100,
     height: 100,
     color: Colors.teal,
     child: Text(
       'Widget 1',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
   Container(
     alignment: Alignment.center,
     width: 100,
     height: 100,
     color: Colors.indigo,
     child: Text(
       'Widget 2',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
   Container(
     alignment: Alignment.center,
     width: 100,
     height: 100,
     color: Colors.deepOrange,
     child: Text(
       'Widget 3',
       style: TextStyle(fontSize: 18, color: Colors.white),
     ),
   ),
```
![code-snippet-image](https://user-images.githubusercontent.com/82392526/196350081-aac1fe46-fd82-4452-8e8f-f4c882761c53.png)



You will notice in the above image, along with the above code (we have highlighted the code), that widget 1’s alignment is at the bottom center, and when you use crossAxisAlignment.baseline, other widgets align themselves with widget 1 at its baseline.


### 2)TextDirection:

This property determines the order in which to lay the children horizontally. The default is ltr, which means left to right. You can change to rtl if you are making an app that supports right to left (e.g., Arabic), and it will start placing widgets from the right-hand side. It is used to place widgets according to the right-hand and left-hand sides.

 ![td-ltr](https://user-images.githubusercontent.com/82392526/196350079-01d53fd5-5075-41b0-b44a-2a06823c6c2a.png)
 ![td-rtl](https://user-images.githubusercontent.com/82392526/196350077-cd1cac8e-cbfc-4431-864a-df87843adf6a.png)

### 3)Vertical Direction: 
This property determines the order in which to lay the children vertically. The default is down. It will place the widgets from top to bottom, and if you change its direction to up, then it will place the widgets from bottom to top. it is specially used to reverse the direction of the widgets. Now, this particular property will work with the column with its direction as vertical.


 ![vd-tb](https://user-images.githubusercontent.com/82392526/196350075-eb22bec2-3b37-4705-9739-d9cbfee3bf5d.png)
 ![vd-bt](https://user-images.githubusercontent.com/82392526/196350073-25344b2d-49a2-405b-a025-7b9b571177ca.png)






### 4)MainAxisSize: 
It decides how much space should be occupied on its main axis. In any layout such as a row, column space is occupied by its children. After occupying the space, there might be some space remaining, so the mainAxisSize decides whether to utilize the maximum space available or the minimum. The default value is maximum.

![main-axis-row-min](https://user-images.githubusercontent.com/82392526/196350133-10c7b066-6db3-466c-ac66-bb83e0664967.png)
 ![main-axis-row-max](https://user-images.githubusercontent.com/82392526/196350144-c3ba57c7-7069-407c-90b4-a2b15676da41.png)
 ![main-axis-column-min](https://user-images.githubusercontent.com/82392526/196350142-9062ae14-b3fb-4989-9b59-9f31efb665f7.png)
 ![main-axis-column-max](https://user-images.githubusercontent.com/82392526/196350141-a7b9d4aa-fe3a-4390-997d-45c4037a0804.png)


We have wrapped the Row/Column widget with a container to check the behavior of the main axis size property. You will notice in the image above that when it is set to max, it takes up the whole width of the screen. You have to understand that it is not the container that is extending itself to the max-width of the screen but it is the row that is doing it. Though there isn’t any widget at the end, the row still takes up the whole space available to it. And when it is set to min, The Row only takes up the space that is needed for it to place the 3 widgets. If you add one more widget at the end of widget 3, the row will extend and fit the new widget inside it, taking up only the space needed for placing 4 widgets.

### 5)TextBaseline:
This property is responsible for the alignment of the text in the Row or Column widget to its baseline.There are two options available on this property that are.


Alphabetic: The horizontal line used to align the bottom of glyphs for       alphabetic characters.
Ideographic: The horizontal line used to align ideographic characters.
 
## Bonus tips:
The row has no horizontal scrolling. So, when a large number of children are inserted into a single row that is not able to fit into the row, then it will give us an overflow message (for example, right overflowed by 560px ). And similarly, the column has no vertical scrolling. So, when a large number of children are inserted into a single column whose total children size is greater than the total height of the screen, then it will give us an overflow message (for example, bottom overflowed by 684px).

note: To fix this kind of error, we usually wrap the [row](https://api.flutter.dev/flutter/widgets/Row-class.html) or [column](https://api.flutter.dev/flutter/widgets/Column-class.html) widget with a SingleChildScrollView widget



_So, these are the properties of the Row and Column widget, and the goal was to give you an overview of the Row and Column widget in a flutter. If you want to read more about row and column, head over to the flutter docs for row and column._



Rows and columns are most commonly used widgets and basic building block for any complex design.

Rows and columns in Flutter


## Android Intents
Intents are the means by which Android components communicate with one another. They’re message-passing mechanisms in Android that help various Android components talk to one another seamlessly.

#### Usecases 
The three fundamental usecases of intents include:
1. to trigger another activity
2. to start a service
3. to deliver a broadcast receiver

An **Activity** represents a single screen in a native android app. A **Service** is a non-UI component that performs operations in the background. A **broadcast** is a message that any app can receive. The system delivers various broadcasts for system events, such as when the system boots up or the device starts charging.

### Types
#### 1. Explicit intent
Here we mention explicitly the name of the android component, we want to trigger using the intent.
```java
Intent secondActIntent= new Intent(MainActivity.this,ActivitySecond.class);
startActivity(secondActIntent);
 ```
 #### 2. Implicit intent
Here we don’t mention the name of the Android component (activity, service or broadcast receiver) that we intend to trigger explicitly.

 ###### Then how does the identification of the components that needs to be triggered happens? 
 The component that needs to be triggered  is resolved through a concept called intent filter and this process is known as intent resolution.

Assume we have a component 1 which can be anything i.e. activity, service or broadcast receiver and we want to trigger component 2. In explicit event, component 1 explicitly mentions the component i.e component 2 that it wants to trigger.

But in the case of implicit intents, component 1 will broadcast a intent, then that intent is allowed to be handled by the android system. Through the intent filter, the android system finally identifies the other component that needs to be trigger.

### Intent Resolution

Any component that needs to be triggered through the implicit intent has to declare a certain set of attributes to which it wants to respond. This is done through intent filters.

In the manifest.xml file, for the android component (which want to be triggered through implicit intent), we need to add an intent filter tag and this tag contains further three attributes i.e. **action**, **category**, and **data**.

**Action:** A string that specifies the generic action to perform (such as view or pick).
Example, 

ACTION_VIEW (when we have some information that an activity can show to the user, such as an address to view in a map app)
ACTION_SEND: (when we have some data that the user can share through another app, such as an email app)

**Category:** A string containing additional information about the kind of component that should handle the intent.
Example,
CATEGORY_BROWSABLE: The target activity allows itself to be started by a web browser to display data referenced by a link, such as an image or an e-mail message.

**Data:** The type of data supplied is generally dictated by the intent's action.
 For example, if the action is ACTION_EDIT, the data should contain the URI of the document to edit.

This particular component (declared in the manifest file) with the intent filter will only respond if an intent happens in the application with the matching intent filter. When an intent is triggered its action, category and data are compared against declarations present in the intent filter.

A correct match follows these three rules:

1. The action of the intent should match at least one of the actions present in the intent filter. This is because an intent filter can contain multiple action declarations.
2. The category of the intent should match all the categories present in the intent filter
3. The data of intent should match (event partially) with the data of the intent filter

What happens when there are multiple components with matching intent filters?
App picker/chooser is shown as shown below
![intent-chooser](https://user-images.githubusercontent.com/36201975/198523847-4f496661-e6ac-49da-a0d6-366052be3f4c.png)

### Passing the data

Intents are all about passing the data between de-coupled android components which are activities, services and broadcast receivers.Intent is a messaging passing mechanism as well as the message holder.

We can put any data inside the intent in a key-value pair and then pass it around to communicate that message to other components.

This is done through ```putExtra()``` method.

And for the  component receiving the intent, we need to use ```getIntent()``` method and provide the key in order to receive the passed data.

### Launching Intents in Flutter

An interesting this to know is that all these flutter plugins used for opening camera, gallery, file explorers, etc. internally use intents (for android platform) to trigger these activities like the image_picker and file_picker plugins.

Intents are a platform-specific concept and it only exists in an Android Environment. In order to communicate with platform-specific APIs in Flutter we have to make the use of 
Method Channels.

But luckily there’s a plugin that takes care of all the pain of dealing with Platform Channels for us and allows us to launch android intents from our flutter application. 
android_intent_plus is a plugin developed and maintained by the Flutter Community. This plugin allows Flutter apps to launch arbitrary intents when the platform is Android. If the plugin is invoked on some other platform, it will crash the app.

We can add the plugin to our project using the following command: 
flutter pub add android_intent_plus

As discussed previous section, creating an intent implicitly would require us to mention these three properties: action, category, and data. And for passing the data in the intent object (using putExtra() method for native Android code), here we can simply use the arguments field which expects a Map<String, dynamic>.

```
if (platform.isAndroid) {
 AndroidIntent intent = AndroidIntent(
     action: 'action_view',
     data: 'https://play.google.com/store/apps/details?'
         'id=com.google.android.apps.myapp',
     arguments: {'authAccount': currentUserEmail},
 );
 await intent.launch();
}
```

We can mention any string in the action parameter including the name of any custom class to be invoked. In case we want to use any standard android action, chances are that the string constant would not be available for that particular action. Flutter community recommends adding support for that in the plugin and using an action constant to refer to it. 
Some examples of constant action strings which are available in the plugin as of now are: 
'action_view' translates to android.os.Intent.ACTION_VIEW
'action_location_source_settings' translates to android.settings.LOCATION_SOURCE_SETTINGS
'action_application_details_settings' translates to android.settings.ACTION_APPLICATION_DETAILS_SETTINGS

For the arguments parameter, the supported dart values with their corresponding android values are listed here: https://docs.flutter.dev/development/platform-integration/platform-channels#codec

For example, in order to launch the gmail app from your Flutter Application you can do something like this:

```
if (Platform.isAndroid) {
     const AndroidIntent intent = AndroidIntent(
         action: 'action_view',
         package: 'com.google.android.gm',
         data: 'mailto:test@gmail.com?subject=Issue');
     await intent.launch();
   }
```

So that’s all for triggering intents from your Flutter Application. 
But can we also trigger a Flutter Application from an externally broadcasted event? The answer to this question is: Yes, it can definitely be done. But that’s a topic for an incoming blog…

Read about what Android intents are and how to integrate them in Flutter

Integrating Android Intents in Flutter


# Forms.
Requesting input from users is one of the core functionalities of a mobile application. A good example would be the login or registration of the user. For this, users generally need to enter their email addresses along with their passwords. To ensure that the user enters valid information, Flutter offers a widget called [“Form”](https://docs.flutter.io/flutter/widgets/Form-class.html), We use forms that serve the following purposes:
- Check whether the information which the user has provided is valid.
- To collect specific data from users, For example, the user’s name, email, address, phone number, date of birth, etc..
- Displays a friendly error message letting them know what went wrong.

## Building a form
Building a form and adding validation will take following three steps:
1) Create a form with a global key
2) Add Input Widgets with validation logic
3) Create a button to validate and submit the form

### 1)   Create a form with a global key
To create a form we must provide a global key.
But what is a global key?
The global key is used to uniquely identify the Form and allows validation of the form in a later step. It is declared as follows.

    final _formKey = GlobalKey<FormState>();

What is `validation` and how does it actually work?

Validations are the checkpoints for the data to be collected from the user. For example,  if we want to collect some data about a person, let’s say his email or phone number. These validations ensure that person entered a valid email, and phone number using validate method If the user enters any invalid input, then the Validator function in flutter will detect it & return an appropriate error message.
  
### 2)   Add Input widgets with validation logic
There are two frequently used input widgets in flutter that are as follows.

- TextFormField
- DropdownFormField
#### TextFormField
It is used to take input from the user in a flutter. We can perform any operation on that user input data using TextFormField. TextFormField widget is especially used in the app to store the data input by the user while using the app. Such as when users register their accounts to the app.
 Basic Example of TextformField.
![sample-form](https://user-images.githubusercontent.com/82392526/199165663-e759e1b7-0012-4c1c-b8aa-43ba6a9a4a74.png)

These are the following properties in the textformfield widget.

**autovalidateMode**

It is used to validate the input as soon as we enter the data.
It has three values as follows:

1) AutovalidateMode.always: It will auto-validate even without user interaction.
2) AutovalidateMode.disabled: It is used to disable/stop auto-validation.
3) AutovalidateMode.onUserInteraction: This value is used to auto-validate only after its content changes,i.e. If the user has made any changes. 

**Controller**

When working with a TextFormField you can define a TextEditingController to get information about the current value, or perhaps clear the text from the textfield using `TextEditingController.clear()`. Also used to control the text being edited.

**obscure text**

We can use this property if we want to hide the input, as we do in the case of the      password. 

**keyboardType**

It is used to specify the keyboard for different types of fields for example for phone  number we use TextInputType.phone, and for the email we use TextInputType.emailAddress,

**onSaved**

It is used to assign the input text to the variable of that specific field Like in this case, we are assigning the value to the _name variable as shown below.

```
onSaved: (String value) {
   _name = value; 
},
```


**Decoration**

As you can see we have a simple TextFormField widget. By default when you add a TextFormField you will get the material styling. however, if you want to make it more customized then you can use inputdecoration in the decoration property which provides you with the following options.

**Icon**

It is used to add an icon to the input field as shown in the below image,

**Hint Text**

It displays the hint text inside the input area to help the user understand what input is required,

**Helper Text**

It displays the helper text.

**Counter Text**

It displays the count of the characters in the input, which is displayed below the input area.

**Border**

It is used to add a border to the input field.

**Prefix**

It displays Prefix before the input area.

**Suffix**

Suffix after the input area.

##### Following are outputs of Icon, hint text, helper text, counter text, prefix, and suffix.

![image](https://user-images.githubusercontent.com/82392526/199709215-5726b845-01b7-4c60-a7ee-7a2533f58115.png)


**Validator**
This property validates an input. Returns an error string to display if the input is invalid, Here you can see that we are returning “Please enter a valid email address” if an email does not match the regular expression else we are returning null.     
```dart
validator: (String email) {
bool isEmailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(email);
   if(!isEmailValid )
     return 'Please enter a valid email address;
   else
     return null;
 },
```

Let’s see different error messages for different conditions. 
![image](https://user-images.githubusercontent.com/82392526/199708364-3b48028e-ea8d-4966-816e-b944f67c6af3.png)



Let’s see all the code:
```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  AutovalidateMode _autoValidate = AutovalidateMode.disabled;
  String? _name;
  String? _mobile;
  String? _email;
  void _validateInputs() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
    } else {
      setState(() {
        _autoValidate = AutovalidateMode.always;
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Form Validation'),
        ),
        body: SingleChildScrollView(
          child: Container(
            margin: const EdgeInsets.all(15.0),
            child: Form(
              key: _formKey,
              autovalidateMode: _autoValidate,
              child: formUI(),
            ),
          ),
        ),
      ),
    );
  }

  Widget formUI() {
    return Column(
      children: <Widget>[
        TextFormField(
          decoration: const InputDecoration(labelText: 'Name'),
          keyboardType: TextInputType.text,
          validator: validateName,
          onSaved: (String? val) {
            _name = val;
          },
        ),
        TextFormField(
          decoration: const InputDecoration(labelText: 'Mobile'),
          keyboardType: TextInputType.phone,
          validator: validateMobile,
          onSaved: (String? val) {
            _mobile = val;
          },
        ),
        TextFormField(
          decoration: const InputDecoration(labelText: 'Email'),
          keyboardType: TextInputType.emailAddress,
          validator: validateEmail,
          onSaved: (String? val) {
            _email = val;
          },
        ),
        const SizedBox(
          height: 10.0,
        ),
        OutlinedButton(
          onPressed: _validateInputs,
          child: const Text('Validate'),
        )
      ],
    );
  }
  String? validateName(String? value) {
    if (value!.isEmpty) {
      return 'Name cannot be empty';
    }
    if (value.length < 3) {
      return 'Name must be more than 2 charater';
    } else {
      return null;
    }
  }

  String? validateMobile(String? value) {
    if (value!.isEmpty) {
      return 'Phone number cannot be empty';
    }
    if (value.length != 10) {
      return 'Mobile Number must be of 10 digit';
    } else {
      return null;
    }
  }

  String? validateEmail(String? value) {
    String pattern =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = RegExp(pattern);
    if (value!.isEmpty) {
      return 'Email cannot be empty';
    }
    if (!regex.hasMatch(value)) {
      return 'Enter Valid Email';
    } else {
      return null;
    }
  }
}
```

 

#### DropdownButtonFormField
It is the Flutter widget that is the combination of the dropdown widget and a formfield. Which takes a list of items/values and displays them in the dropdown, This widget has similar properties as textfromfeild. 

The following are the properties of a dropdown button form field.

**Value**

It is the property that keeps the track of selected values from the dropdown. In our case, we name it “_selectedValue”.

**Hint**

It is a property that takes a widget, which is used to display an Icon or text In this        example we used Text Widget which says” Choose One”.

**onChanged**

This is a required property that is used for changing the values in the dropdown. It is    called when the user selects an item/value from the dropdown. 

**onSaved**

It is used to assign the selected value of the dropdown to the variable Like in this case, we are assigning the value to the _selectedValue variable as shown below.

```dart
 onSaved: (value) {
   setState(() {
     _selectedValue = value;
   });
},

```

**validator**

This property validates the dropdown. And returns an error string to display if the input is invalid, Here you can see that we are returning “Please choose the value from the dropdown” if an email does not match the regular expression else we are returning null.     
```dart
validator: (String? value) {
                      if (value == null || value.isEmpty)           {
   return "Please choose the value from the dropdown";
                      } else {
                        return null;
                      }
                    },
```
![dropdown-validator](https://user-images.githubusercontent.com/82392526/199167632-a3ce5d3d-985d-4624-88d9-1c9721dc1d07.png)
       


 
**Items**

This property takes a list of items/values( in this example we are passing a list of String) and displays the values in the dropdown using a text widget, By mapping each value of that list into dropdownmenuitem  as shown below. 
```dart
items: listOfValue.map((String val) {
                      return DropdownMenuItem(
                        value: val,
                        child: Text(
                          val,
                        ),
                      );
                    }).toList(),
```


Here’s the code for DropDownButtonFormField.

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  AutovalidateMode _autoValidate = AutovalidateMode.disabled;
  String? _selectedValue = '1';
  List<String> listOfValue = ['1', '2', '3', '4', '5'];
  void _validateInputs() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
    } else {
      setState(() {
        _autoValidate = AutovalidateMode.always;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Form Validation'),
        ),
        body: SingleChildScrollView(
          child: Container(
            margin: const EdgeInsets.all(15.0),
            child: Form(
              key: _formKey,
              autovalidateMode: _autoValidate,
              child: Column(
                children: [
                  DropdownButtonFormField(
                    value: _selectedValue,
                    hint: const Text(
                      'choose one',
                    ),
                    isExpanded: true,
                    onChanged: (value) {
                      setState(() {
                        _selectedValue = value;
                      });
                    },
                    onSaved: (value) {
                      setState(() {
                        _selectedValue = value;
                      });
                    },
                    validator: (String? value) {
                      if (value == null || value.isEmpty) {
                        return "Please choose the value from the dropdown";
                      } else {
                        return null;
                      }
                    },
                    items: listOfValue.map((String val) {
                      return DropdownMenuItem(
                        value: val,
                        child: Text(
                          val,
                        ),
                      );
                    }).toList(),
                  ),
                  OutlinedButton(
                    onPressed: _validateInputs,
                    child: const Text('Validate'),
                  ),
                  Text("Selected Value: ${_selectedValue ?? 0}")
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
```

These were the properties of the DropDownButtonFormField and TextFormField.
However, you could be wondering at this point where to call the validators or how those conditions operate.
Well, the answer to that question is in the next step…
### 3)   Add the validation method and submit the form.
Let’s create a method called _validateInputs to check the validation of the fields which is used to submit the form.
There is a method called bool validate() defined under the form class which is used to validate the form. As soon as method bool validate() is called all the validators will be called. If it does get any string then it will show that string as an error and if it does not get any string means no Error. Suppose there is no error then we will call the method void save() and it will call the onSave property. So, that all the form input could be stored in a variable corresponding to each input Field.
```dart
void _validateInputs() {
 if (_formKey.currentState.validate()) {
   _formKey.currentState.save();
 } else {
   setState(() {
      _autoValidate = AutovalidateMode.always;
   });
 }
}
```
 
These are the examples of dropdownbuttonformfield after successful validation
![dropdown-button](https://user-images.githubusercontent.com/82392526/199708371-0f1963ce-a6dc-4c58-ba79-684e4449c242.png)


Requesting input from users and validating it is one of the core functionalities of a mobile application.

Form validation in Flutter


Generally it's a good practice to show the app version and build number in the about or similar section in the app.This might be helpful for the developers, testers and even the normal users of the app to report as well as debug any kind of bugs or unusual behaviours in the app by specifying the exact version in which they're facing any issues.

You might have seen several popular apps which do so.
Below is the screenshot from `Coin` app by **Zerodha**

![photo1668147953](https://user-images.githubusercontent.com/36201975/201277300-f3789cdc-cc02-4b21-94e1-2127faa7f6f7.jpeg)


For such scenarios, there is a nice plugin from the Flutter community called [package_info_plus](https://pub.dev/packages/package_info_plus) which is an abstraction for querying details about an application package.

The package is very robust and currently supports Android, iOS, Web, macOS, Windows, and Linux.

## Usecases

1. To display the version and the build number in the app.
2. To trigger logic such as showing app update dialog by comparing the current package version with the one on the store, or functionalities related to specific app version
3. The plugin also exposes properties such as `installerStore` and `buildSignature` using which we can verify if the app has been downloaded from a authentic source and has not been tampered with.

## Usage
For adding package_info_plus, run the following command from the project root
```
flutter pub add package_info_plus 
```
Then we need to create an instance of PackageInfo class and then simply call the required package property.

```
PackageInfo packageInfo = await PackageInfo.fromPlatform();
print(packageInfo.version);
```

## PakcageInfo properties description
 #### 1. appName
 As the name suggests it's simply the application name. 
 
Takes its value from:
`CFBundleDisplayName` on iOS,
`application/label` on Android.
#### 2. packageName
This property contains the package name. 

Takes its value from:
`bundleIdentifier` on iOS,
`getPackageName` on Android.
#### 3. version
It conatains the semantic version value i.e `major.minor.patch`.

Takes its value from:
`CFBundleShortVersionString` on iOS,
`versionName` on Android.
#### 4. buildNumber
A build number is a specific identifier that lets us know what software you're running as well as when it was updated last.

Takes its value from:
`CFBundleVersion` on iOS,
`versionCode` on Android.
#### 5. buildSignature
This property only exists for Android platform. It has an empty string value on iOS, signing key signature (hex) on Android.
#### 6. installerStore
Indicates through which store this application was installed.




Learn how to use package_info_plus to get package data

Accessing package information in Flutter


# Creating UPI Payment QR Code Generator in Flutter

UPI payment is a widely used feature in most applications. In this blog, we will show how to create such functionality in Flutter using three essential packages.

To create this functionality, you only require three things:

1. A UPI ID and the amount you want to transfer.
2. A package to generate a QR code - we will be using the ["barcode"](https://pub.dev/packages/barcode) package.
3. A package to render the QR code generated - we will be using the ["flutter_svg"](https://pub.dev/packages/flutter_svg) package (optional).


## Setup

To get started, add the barcode and flutter_svg packages to your pubspec.yaml file under the dependencies section:

  ```yaml
  barcode: ^2.2.3
  flutter_svg: ^1.0.3
  ```

  Save the file and run 'flutter pub get' to install the packages.

## Building data for QR code
   
Each UPI QR Code contains a url that encodes various required data points. The URL is of the following format:
```
upi://pay?pa=${UPIId}&pn=${payeeName}&am=${transactionAmount}&tn=Payment Message/note&cu=INR
```

Let’s look at each field in the URL. 

 1. pa-Payee address or business virtual payment address (VPA).
 2. pn - Payee name or business name. 
 3. am- Transaction amount. (Up to two decimal digits are allowed. This should be set in the details object instead of the supportedInstruments object.) 
 4. cu -Currency code. (This should be set in the details object instead of the supportedInstruments object. Only the Indian rupee (INR) is currently supported.) 
5. tn     - Transaction note. It is the description appearing in the Google Pay     payflow. (Maximum length is 80 characters). 

Now, let's take a look at the function we can use to generate UPI format data for the QR code:

```dart
String generateUpiQRData({
  required String upiId,
  required String payeeName,
  required int amount,
  String currencyCode = "INR",
  String transactionNote = "",
}) {
  return "upi://pay?pa=$upiId&pn=$payeeName&am=$amount&tn=$transactionNote&cu=$currencyCode";
}
```
By utilizing the generateUpiQRData function, you can easily construct the UPI URL by providing the necessary parameters such as the UPI ID, payee name, transaction amount, currency code (with default as INR), and an optional transaction note.
## Generating QR Code
To generate a QR code using the data returned from the previous function and the barcode library, we’ve created the following method.
 ```
 Future _loadBarcode() async {
  isLoading = true;
  setState(() {});

  String upiDetails = generateUpiQRData(
    upiId: widget.upiID,
    payeeName: widget.payeeName,
    amount: 1,
    transactionNote: "Test Payment",
    currencyCode: "INR",
  );

  barcodeData = await _getQrcodeData(Barcode.qrCode(), upiDetails);

  isLoading = false;
  setState(() {});
}
```


In the _loadBarcode() method, we set the isLoading flag to true and update the state to reflect the change. Then, we generate the upiDetails string using the generateUpiQRData() function, which creates the UPI format data. Next, we pass this string along with Barcode.qrCode() from the barcode package to the _getQrCodeData() method to generate the QR code data.

By calling Barcode.qrCode(), we indicate that we want to generate a QR code specifically. This function returns an instance of the Barcode class with the QR code type specified.
Finally, we set the isLoading flag to false and update the state again. 

## Displaying the QR Code


To display the generated QR code, we’ve created the following method.

```
  String _getQrcodeData(Barcode qrcode, String data) {
    return qrcode.toSvg(
      data,
      width: MediaQuery.of(context).size.width * 0.7,
      height: MediaQuery.of(context).size.width * 0.7,
    );
  }
```

The _getQrcodeData() method takes two inputs: the QR code provided by the Barcode package and a String representing the data to be encoded. This method utilizes the toSvg() method from the Barcode package to convert the data into an SVG string representation of the QR code. Additionally, the method dynamically sets the width and height of the SVG based on the device's screen size.

To actually display the QR code, we used the SvgPicture.string() widget. This widget allows you to pass the generated SVG data as a string parameter. Here's an example of how you can implement it:
```
SvgPicture.string(
  barcodeData,
  height: 200,
  width: 200,
),
```
And as a result, you will see the following output!!!

![image](https://github.com/vaishnavi-2307/vaishnavi/blob/main/Untitled%20design.jpg?raw=true)

## Complete example

This complete example should now use the indvidual functions that we created above.

```
Example:


import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:barcode/barcode.dart';
import '../core/presentation/theme/colors/colors.dart';


class ScanQRCode extends StatefulWidget {
  const ScanQRCode({super.key, required this.upiID, required this.payeeName});
  final String upiID;
  final String payeeName;
  @override
  State<ScanQRCode> createState() => _ScanQRCodeState();
}


class _ScanQRCodeState extends State<ScanQRCode> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () {
      _loadBarcode();
    });
  }


  bool isLoading = true;
  String? barcodeData;


  Future _loadBarcode() async {
    isLoading = true;
    setState(() {});
    String upiDetails =     "upi://pay?pa=${widget.upiID}&pn=${widget.payeeName}&am=1&tn=Test Payment&cu=INR";
    barcodeData = _getBarcodeData(Barcode.qrCode(), upiDetails);
    isLoading = false;
    setState(() {});
  }


  String _getBarcodeData(Barcode bc, String data) {
    return bc.toSvg(
      data,
      width: MediaQuery.of(context).size.width * 0.7,
      height: MediaQuery.of(context).size.width * 0.7,
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(context, 'UPI Setup'),
      body: isLoading
          ? Center(
              child: const CircularProgressIndicator(),
            )
          : Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Spacer(flex: 1),
                  SvgPicture.string(
                    '''$barcodeData''',
                    height: 200,
                    width: 200,
                  ),
                  SizedBox(height: 40),
                  Text(
                    'Scan the QR code',
                    style: TextStyle(color: blueContainerColor),
                  ),
                  Spacer(flex: 1),
                  ElevatedButtonWidget(
                    text: 'Collect Payment',
                    onPressed: () {},
                  ),
                  Spacer(flex: 2),
                ],
              ),
            ),
    );
  }
}
```



That's it! You now have a Flutter app that can generate a QR code with UPI data using the Barcode package. You can customize the UPI data and QR code size as per your requirements.

Now, it's time to put your newfound knowledge to practice and explore the endless possibilities of QR code integration in your Flutter projects. Happy coding!


QR codes have become an integral part of our modern digital lives, offering a convenient way to share information and facilitate various transactions. In this blog, we will explore how to generate and display QR codes in a Flutter application using the barcode package. We will focus on a practical example of generating a UPI payment QR code and displaying it on the screen.

Blogs

Most Popular Reads

Creating UPI Payment QR Code Generator in Flutter

Accessing package information in Flutter

Form validation in Flutter

Integrating Android Intents in Flutter

Rows and columns in Flutter

Freezed - Easy data classes and unions