Through this article I’ll let you know how to get started with flutter. I’ll walk you through installation of flutter and creating a basic “Hello World” app using flutter. For introduction on Flutter and it’s framework you can go through my previous article.

Installing Flutter:

Get the Flutter SDK

(Note: You can skip this if you wish to use Intellij IDE, I’ll let you know how to do this in IDE)

1. On Linux:

• Run

  git clone -b alpha https://github.com/flutter/flutter.git

  in $HOME dir.

• Open your $HOME/.bash_profile

• Add the following line and then save it.

  export PATH=$HOME/flutter/bin:$PATH

• Run

  source $HOME/.bash_profile

   

• To verify your path run

  echo $PATH

   

• Then run the below command to see if all the dependencies are met.

  flutter doctor

   

2. On Windows:

• Ensure you have git install. If not you can get it from here

• Open command prompt

• Run

  git clone -b alpha https://github.com/flutter/flutter.git

   

• Then go to Control Panel > User Accounts > User Accounts > Change my environment variables

• Under “User Variables” check for “PATH”

  • If entry exist, append the full path to flutter\bin with ; as a separator from existing values.

  • If entry does not exist, create a new user variable named Path with the full path to flutter\bin as its value.

• Then run the below command to see if all the dependencies are met.

  flutter doctor

   

3. On OSX:

• Run

  git clone -b alpha https://github.com/flutter/flutter.git 

  in $HOME dir.

• Open your $HOME/.bash_profile

• Add the following line and then save it.

  export PATH=$HOME/flutter/bin:$PATH

   

• Run

  source $HOME/.bash_profile

   

• To verify your path run

  echo $PATH

   

• Then run the below command to see if all the dependencies are met.

  flutter doctor

   

IDE Setup:

Flutter is great when in action with Intellij IDE. Though you can use flutter cli commands to create and develop applications. Run flutter help to see all available commands. For setting up Intellij IDE first

• Download Intellij form here

• To install Plugins

  • Start IntelliJ.

  • Open plugin preferences ( Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux).

  • Select Browse repositories…, select the Flutter plug-in and click install.

  • Click Yes when prompted to install the Dart plugin.

  • Click Restart IntelliJ IDEA.

Ensure that you have “Xcode” (only for mac) and Android studio setup.

To setup android studio refer this. After Installing ensure you have set ANDROID_HOME variable to the installation directory.

You can download Xcode from here.

Voila! Everything set, let's proceed creating our own “Hello World” app.

To create an app from IDE:

• In IntelliJ, click Create New Project from the ‘Welcome’ window or File > New > Project… from the main IDE window.

• Select Flutter in the menu and Click on install SDK option to install flutter SDK.

           (Note:Enter or browse to your Flutter SDK directory in Flutter SDK path if you had installed flutter SDK as shown in ‘Get flutter SDK’ step. Specify the top-level flutter directory, without the bin subdirectory. For example, C:\Users\username\flutter or /Users/username/flutter then click Next.)

• Enter “Hello World” as the app name and select Project location.

• Click Finish.

That was easy and cool.

Let’s clean up a bit of code to get “Hello World” up and running,

• Delete all the code below MyApp Class

• Also clear the return statement and replace it with

  return const Center(
    child: const Text('Hello, world!',
      textDirection: TextDirection.ltr
    )
  );

   

• Then select a device or an emulator from right top in the IDE

• Click on the Run Icon to see you the app in action

To create an App from CLI:

• Run command

  flutter create hello_world

  On running the above command, the output will be identical as given below

• Then

  cd hello_world

   

• Open the main.dart file in the lib folder in your favorite editor

• Delete all the code below MyApp Class

• Also clear the return statement and replace it with

  return const Center(
    child: const Text('Hello, world!',
      textDirection: TextDirection.ltr
    )
  );

   

• Use  the below comman to list all connected devices and emulator.

  flutter devices

   

• Run command to see the app in action.

  flutter run

   

• For help, run the below command.

  flutter help

   

That was so simple to create and run a flutter app. Stay tuned for my next article on flutter in which I’ll show how to use widgets to create a Simple mobile app.