Introduction to Flutter
What is Flutter ?
From a long time I was hearing about this new technology called flutter, and as always I couldn’t resist myself, so I directly jumped on flutter documentation to find out what is Exactly Flutter?
“Flutter is a framework for dart language developed by Google, which is used to build beautiful, natively compiled applications for mobile, web, and desktop from a single codebase”, which is pretty amazing because we as developers don’t need to learn tons of languages for different platforms.
If you want to make a mobile application for Android as well as for IOS Flutter makes it very easy to do so, by compiling the code into the native binary code so that it can run cross-platform and we don’t have to learn java or Kotlin for Android and Swift or C# for IOS we can just learn Flutter which saves time and a lot of effort.
Why should you use Flutter?
Here are some features which I like about Flutter.
- Extremely Fast App Development
- Excellent User Interfaces
- Rapid bug fixes
- Amazing Documentation
- Great Community
- Support for Visual Studio Code and Android Studio
- Beginner Friendly
- My Personal Favourite Hot Reload.
I am quite sure that you already like flutter so let’s get started to take a deeper dive into it and make you fall in love with it…
Installation and Setting up
Flutter has amazing documentation for Windows, macOS, and Linux that helps you in setting up your system for developing mobile applications.
Setting up your text editor
We can use any text editor to write and build apps but the recommended approach is android studio and VS code.
Here we will explain about how to install in Android studio based on Manjaro Linux -:
Step 1: Install Android Studio, if you don’t have Android Studio installed on your system you can install it using “sudo snap install android-studio — classic”.
Step 2: Start Android Studio Go to -> Files -> Settings -> Plugins and search for a plugin named Flutter, Install the Flutter Language package and restart your IDE.
Step 3: Now you will see the option to “Start a new Flutter Project”, Select the option, after selecting Click next and select Flutter Application and then next.
Step 4: Give your app a name “hello-world” in this case (keep in mind that the name of the project should be only in lower case letters).
Step 5: Click on install SDK and select a folder in which you want to install your flutter SDK, Android studio will automatically clone the Flutter repository. Then Click -> Next.
Step 6: Enter your company domain like for “com.helloworld” and check the platform channel language for Kotlin and Swift for Then Click on ->Finish.
Now Android Studio will create a project for you If you are making this project for the first time it may take some time once the project is created, the android studio will open main. dart file which is under
helloworld -> lib -> main.dart.
Congratulations! you have just completed installing and configuring your first flutter project, Now to test the application we have to run the application on Emulator. To configure your emulator follow the following steps.
Steps To install AVD (Android Virtual Device)
Step 1: Click on AVD Manager on the top right corner of your navigation bar.
Step 2: Click on Create Virtual Device Select the phone you want, I will suggest you go with Google PIXEL XL then click -> Next, now download the android version you want in your virtual device then -> Next -> Finish.
It may take some time to download and may ask to accept some T&C accept all.
Now take a deep breath because you are ready to run your first application!
Select your emulator, from the dropdown Click on the green play button on your navigation bar or press “Shift + F10”.
BooYaa!!..
This is your first application, Flutterby default creates this dummy Click- Counter application.
Let’s Understand what’s on the screen?
Import in flutter is specified with package keyword followed by the library or package name. In this case, it’s flutter and then followed by file name, here it’s material.dart
Material.dart contains android specific Widgets like FloatingActionButton
Drawer, Appbar and a lot more you can check them out here.
The next thing you will notice is the void main() method. Void means that this method does not return anything, the main method is the entry point for your application and in this case, the main function is calling flutter specific function called runApp which takes any widget as an argument and created a layout that fills the screen, Whenever you will run your application this is the first thing that will execute.
Let’s display a simple Text on our screen.
Firstly remove everything from your main.dart file except
import ‘package:flutter/material.dart’;
Now We will create a main method and call the runApp Method,
void main(){
runApp();
}
The runApp method takes a Widget as an argument, Widgets are simple UI building blocks in Flutter. The views in flutter are based on Widgets, Keep this in your mind always while building a flutter application “EVERYTHING IN FLUTTER IS A WIDGET”. We will discuss more this next time but for now, Create a new class and extends the stateless Widget, Stateless Widgets are those widgets which don’t change in your application. This kind of widget has no state, so they can’t change according to an internal state. They can only react to higher widget changes. Every StatelessWidget class has to override the build method which returns a Widget, here we are returning a MaterialApp Widget consider this as a magic wand which makes your UI look good.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
);
}
}
Now to show something on the screen we can add a Text Widget on the screen, our material app accepts a parameter called home which takes a Widget too, now pass a Text Widget with a string “Hello World” like this.
import ‘package:flutter/material.dart’;
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Text(“hello world”),
);
}
}
Run the app and then you can see hello world on your Emulator screen and you know the meaning and purpose of every line on your IDE. Pat yourself on your back, you have done a lot of work today.