Hello Developers, I have posted my previous post about flutter installation and basic difference, so today we will start the implementation of flutter.
Flutter Hello World App
To start with flutter web development, first of all, we will set up or VS Code IDE to make compatible with flutter development this isn’t mandatory but this will help you for rapid development.
Adding flutter extension to VS Code IDE
- Open VS Code
- Go to Extension by clicking below icon
- Now search for flutter you will get following list then click on install
- Now your extension is ready to use
Create a hello world app with CLI
Run following command to create app with CLI
$flutter create hello_world
This will create a basic app for you.
App structure will be as follows:
So over there will be a lib folder where we will invest time more to develop our application.
If you see the main.dart file this will be our entry point for our application.
You can remove the auto-generated file and write down the following code to understand more about flutter development.
import ‘package:flutter/material.dart’;
void main() {
runApp(new Center(
child: new Text(‘Hello world’, textDirection: TextDirection.ltr)));
}
So now your main.dart file will look like as above.
Flutter Hello world main.dart file
import ‘package:flutter/material.dart’;
This will import the material based flutter package for our application.
void main() {
runApp(new Center(
child: new Text(‘Hello world’, textDirection: TextDirection.ltr)));
}
This will be our app’s entry point where we will create our all widgets and runApp() is the main function where it will start execution of the app.
Running App on Simulator or Emulator:
To run on a simulator or on the emulator, first of all, you need to start it and then run the following command :
$flutter run
This will run your application in the emulator or in the simulator.
That’s it for today, I will post the next tutorials of it soon.
Feel free to reach out to me.