There are more than 3 billion smartphone devices in the world that comprise both Android and IOS. So when we are creating our application we want it to run on both Android and IOS devices but creating an application separately for both platforms is time-consuming and costly. But now we have a technology called FLUTTER where we write a single codebase for both Android and IOS platforms. Flutter falls under the category of Hybrid applications and is backed by Google. Flutter uses dart as a language. Dart is a strongly typed object-oriented language developed by Google. It has a very fast development cycle. Dart supports JIT (Just in Time Compilation ) which means whenever you make any changes in code those can be reloaded in devices very fast and when an application is released in the market Dart supports AOT (Ahead of time compilation ) so apps run on devices very faster which leads to seamless User experience.

For developers, JIT helps in faster app development 

For end users, AOT helps in faster app execution

What is Just in Time compilation

Whenever we write code it is compulsory that the code is converted into a form that the machine can understand. The advantage of the JIT compiler is that it compiles the code after a program starts; a simple JIT compiler compiles the code during the execution of the program in order to compile bytecode sequences into native machine code.

What is Ahead of  Time compilation

An AOT compiler, or ahead-of-time compiler, is a type of compiler that converts source code into machine code before the program is executed. This is in contrast to a JIT compiler, or just-in-time compiler, which compiles code at runtime.

AOT compilers are typically used in production environments because they can improve performance and security. When an AOT compiler compiles code, it can optimize it for the specific platform, resulting in faster execution times. Additionally, AOT compilers can detect errors in code before it is executed, which can help to improve the overall reliability of a program.

Set up for flutter development

To set up Flutter on Android Studio, follow these steps:

• Install the Flutter SDK. The SDK can be downloaded from Flutter Website https://docs.flutter.dev/get-started/install/macos
• Install the Flutter plugin for Android Studio. Open Android Studio and go to Preferences > Plugins > Marketplace. Search for “Flutter” and install the plugin.
• Create a new Flutter project. In Android Studio, go to File > New > New Flutter Project.
• Select the Flutter SDK path. If the Flutter SDK path is not already set, then select the location of the Flutter SDK which is installed previously from the website.
• Select the project type. Select Flutter Application and click Next.
• Enter the project details. Enter a name, description, and location for your project. Click Finish to create the project.

Once the project is created, you can open it in Android Studio and start the development.

To run your Flutter app on Android, you can use the Android emulator or a physical Android device.

To run the app in the emulator, click the Run button in Android Studio.

To run the app on a physical device, connect the device to your computer and select it from the Device selector in Android Studio. Then, click the Run button.

Flutter also has a hot reload feature, which allows you to see changes to your code in your app without having to restart the app. To use Hot Reload, click the Hot Reload button in Android Studio.

Here are some additional tips for setting up Flutter on Android Studio:

• Make sure that you have the latest version of Android Studio installed.
• If you are using a Mac, you may need to install the Android Command Line Tools.
• If you are using a Windows computer, you may need to install the Android Studio Gradle plugin.

Create First Flutter Application: Flutter Hello World Tutorial

Now we are done with installation and we have created the project we will have main.dart file under lib folder

Note: Make sure you are working under project view.

Now within the main.dart this is the file where we are going to code. Currently, we have some boilerplate code that lets us remove it all and try to write our first application from scratch.

First, I am going to import the material .dart package

import 'package:flutter/material.dart';

This is the library which contains all the material widgets. Now the question that arises here is what is material design: material design simply is a design language developed by Google and it defines some guidelines to be followed by Android, ios applications, and even websites so within our dart language we are going to use the widgets that will follow the material guidelines

Next, we will declare the main method this main method is the entry point for dart applications so whatever code we write under this method will be executed 

Within the main() method we have to write the runApp() method. The purpose of runApp() method is to inflate the widget and attach it to the screen which means runApp() method will show whatever we pass as a parameter

void main(){
 runApp(Text("Hello Flutter",textDirection: TextDirection.ltr,));
}

In the above example I have passed the Text widget with text ‘Hello Flutter’ and text direction ltr(left to right). Here I have passed the text direction because many languages like Urdu follow the direction of rtl(right to left).

Note: How do we know what to pass in the above Text widget simply press Cntr for Windows and command for Mac and click on the text widget

It will take to the documentation and here we can see it expects the first parameter as data which we have passed as a text of ‘Hello Flutter’ The first parameter is mandatory and the rest of the parameters are under the curly braces which means they are optional. In order to make my text visible in the center of the screen I am also going to use the Center widget below is the example.

void main(){
 runApp(
   Center(
     child: Text(
     "Hello Flutter",
     textDirection: TextDirection.ltr,)
     ,)
 );
}

Now run the application by connecting your physical device you will be able to see the text ‘Hello Flutter’ on your device. I have also attached the screenshot below.