its time for you to learn the basics of coding with flutter. I will show you the basics of Flutter through a simple hello world app in Flutter
Now that you have a gone thorough introduction of Flutter, its time for you to learn the basics of coding with flutter. I will show you the basics of Flutter through a simple hello world app in Flutter. For that, you need to set up a development environment for Flutter. Setting up IDE for Flutter should be pretty easy. Just go with me step by step and you should have IDE up and running in no time.
We will be using Android studio for coding so go to Google's Official site for Android studio and download and install the latest version of Android studio. Just follow the standard procedure for installing and you will have the Android Studio installed in no time.
After installation, when you open your Android studio for the first time, your Android studio will look somewhat like this. Click on the configure button and select Plugins.
In Marketplace, search for Flutter and install it. It will prompt you to install the dart plugin. Click Yes. Now when prompted restart your Android studio. Once Android studio restarts, you should see Strat a new Flutter project in your menu. This confirms that Flutter has been successfully been installed.
You will need to separately download Flutter SDK from the Flutter's Official Website and extract it in any location which you prefer. Just remember the location as Android studio will ask it afterward.
Start a new Flutter Project and select Flutter application. On the next screen enter the project name and give the path where you downloaded Flutter SDK. As soon as you enter the path, it will check if the SDK is up to date or not. Once done click Finish.
As soon as your Android studio starts, you will see a chunk of code in main.dart file. Clear all the code except the import statement.
Now add this code in its place.
Run it and you will see hello word at the center of the screen. Now lets' break down the code little by little.
The first line, Void main() is a regular function like it is in Java. It is inside this function that you write your actual code. The line is a runApp function which gets called inside void main. Next inside is the MaterialApp(). It tells the Android that the app is material designed. 99.99 % of all the apps will run inside MaterialApp except for some times when you want the app in Cupertino style for iOS. Next is home, which sets the current screen as the default screen for coding. Next is the Centre widget which centers everything placed inside it. The child of the center widget is the text widget hello world, which will be put to the center of the screen by the center widget.
You can further modify the code by adding a widget Scaffold instead of center and then create a new container for the center widget. The scaffold is where you have elements like the title bar, bottom navigation bar, etc. Here is the code after adding the Scaffold
Every widget you add has to be the child of some widget inside your app. So we add an attribute child before every widget.
This was a basic overview of Flutter. Tell us what you think about our tutorial in the comments. Once you finish this you can proceed to Working with images in Flutter.
Setting up IDE for Flutter
After installation, when you open your Android studio for the first time, your Android studio will look somewhat like this. Click on the configure button and select Plugins.
In Marketplace, search for Flutter and install it. It will prompt you to install the dart plugin. Click Yes. Now when prompted restart your Android studio. Once Android studio restarts, you should see Strat a new Flutter project in your menu. This confirms that Flutter has been successfully been installed.
You will need to separately download Flutter SDK from the Flutter's Official Website and extract it in any location which you prefer. Just remember the location as Android studio will ask it afterward.
A Flutter Hello World App
Start a new Flutter Project and select Flutter application. On the next screen enter the project name and give the path where you downloaded Flutter SDK. As soon as you enter the path, it will check if the SDK is up to date or not. Once done click Finish.
As soon as your Android studio starts, you will see a chunk of code in main.dart file. Clear all the code except the import statement.
Now add this code in its place.
[void main() {
runApp( MaterialApp( home: Center( child: Text("Hello World"), ), ), );}]
Run it and you will see hello word at the center of the screen. Now lets' break down the code little by little.
The first line, Void main() is a regular function like it is in Java. It is inside this function that you write your actual code. The line is a runApp function which gets called inside void main. Next inside is the MaterialApp(). It tells the Android that the app is material designed. 99.99 % of all the apps will run inside MaterialApp except for some times when you want the app in Cupertino style for iOS. Next is home, which sets the current screen as the default screen for coding. Next is the Centre widget which centers everything placed inside it. The child of the center widget is the text widget hello world, which will be put to the center of the screen by the center widget.
You can further modify the code by adding a widget Scaffold instead of center and then create a new container for the center widget. The scaffold is where you have elements like the title bar, bottom navigation bar, etc. Here is the code after adding the Scaffold
[void main() {
runApp( MaterialApp( home: Scaffold( body : Container( child : Center( child : Text("Hello World"), ) ), ), ), );}]
Every widget you add has to be the child of some widget inside your app. So we add an attribute child before every widget.
This was a basic overview of Flutter. Tell us what you think about our tutorial in the comments. Once you finish this you can proceed to Working with images in Flutter.
COMMENTS