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)
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
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
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.
Looking for Mobile Development in Flutter? Click Here