Installation & set up flutter and run the first app Hello world in Flutter using Android studio

 Here, I am assuming, you already installed Android studio. I am detailing the step by step to install and run the first flutter app with screen shots.

We can directly get into the field,

1. Launch Android studio

2. From the Android studio tab, select preferences

3. From the pop-up opened, from left side pane, click on plugins

4. Make sure you selected market place tab here, not the installed one.

5. Initially install Dart language

6. Similalrly, install Flutter plugin

7. Now, download the flutter SDK from the link for macOS here 

8. Now set the environment variable, 

the steps are,

1. Open terminal.
2. vim $HOME/.zshrc
3. Press "I" key for going to insert mode.

4. add the following line in the opened file:
export PATH="$PATH:/YOUR_FLUTTER_DIR/flutter/bin"

5. Press "Esc" then write :wq! in terminal and press enter to exit vim.

6. Reopen the terminal and check "flutter doctor"

9. Now go to Android studio and click new flutter project from File-> New

10. Set the flutter SDK path here

screen-shot

11. Here, one thing to note is, flutter project names are in lower case with underscore, camel case is not allowed.

12. Once the first flutter project is created, you navigate to "lib" folder. You can see Android folder, iOS folder and lib folder. Here, inside "lib" folder, you can see one file called "main.dart". 

screen-shot

13. Open "main.dart" and you can see the main() function where the execution start. You can delete the whole contents and use the blow snippet to see the very basic hello world text.

void main() {
  runApp(const MaterialApp(
    home: Text('Hello Flutter')),
  );
}

14. Now you can play with it and add style and colour to the window as well as to text. The modified code looks like this,

void main() {
  runApp(const MaterialApp(
    home: Material(
      color: Colors.amber,
      child: Center(child: Text('Hello World', style: TextStyle(
          color: Colors.white, fontSize: 25)))),
  ));
}

15. And finally, last but not least,  here are a set of commands used in terminal for flutter.

16. You can find the full source code here

Happy exploring!!