Flutter 101: Basic Introduction and How to Install it

Flutter is an open-source and free framework for creating a mobile application for both Android and iOS devices. It is developed by Google. This is one of the booming technology in recent days. Dart Programming Language is used in Flutter. Google offers many features in the later version.

flutter 101 tutorialsPin

About Dart Language

Dart language is similar to Java, C#, Javascript and so on. I hope both programming languages are easy to learn.

How to install Flutter

  1. For installation go to https://flutter.io/docs/get-started/install.
  2. Then download Flutter SDK from an authorized site.
  3. Set path to Flutter SDK.
  4. Run Flutter tool to check whether it working or not.

SEE ALSO: How to Install Flutter in Windows 10, 7

Flutter Developing Software

Android Studio

It is specially designed for Android developers. Android Studio is developed by Google. It also supports Java, C++, and so on… Lint tool is used for catch performance, usability, version compatibility.

Visual Studio Code

Visual Studio Code is developed by Microsoft for source code editing. It supports all programming languages. It is also customizable, so you can change editor’s theme, keyboard shortcuts and preferences.

IntelliJ IDEA

IntelliJ IDEA is a Java integrated development environment. This software support java, Dart Language and so on.

Flutter Studio

Flutter studio is one of the most flexible apps for the framework. Here you can drag and drop the design and it will automatically generate source code.

Flutter Book (Best. I recommended)

  • Futter in Action – Entire Flutter and Dart Resource.  Super book to learn Flutter in Easy way.

Tutorials

Flutter Blogs

Flutter Design’s

By using Flutter you can design a whole mobile app.

Components:

Inputs and selection

  • TextField
  • CheckBox
  • Radio
  • Switch
  • Slider
  • Date & Time

Application Structure

  • Scaffold
  • Appbar
  • BottomNavigationBar
  • TabBar
  • TabBarview
  • Drawer.

Buttons

  • IconButton
  • ButtonBar
  • PopupMenuButton
  • FlatButton

Dialog box

  • SimpleDialog
  • AlertDialog
  • BottomSheet
  • SnackBar

Information Display

  • Image
  • Icon
  • Tooltip
  • DataTable

Yet there are many types used in the flutter.

Widgets

Widgets are one of the valuable components in Flutter. As you all know about  Activity Fragments and Views components. For instead of those component Widgets is used in Flutter. Each and every widget defines an individual layout.

In Widget 2 basic types are there

  • StatefulWidget
  • StatelessWidget

StatelessWidget shows only static data, and unable to change any of its own properties.

In StatefulWidget you can update the changes.

Scaffold

Scaffold Widget provides visual layout structure. This class supports APIs for showing Drawer, App Bar, and Bottom Sheets.

Advantage and Disadvantage of Flutter

Pros

  1. It is used for creating both Android and iOS.
  2. It was developed by Google so it is safe and you get more support from Google.
  3. Easy to learn for beginners also.
  4. In Flutter hot reload option is available. By using this you can see the live changes you have done.
  5. XML coding is not needed for creating Layout.

Cons

  1. It is small when comparing to React Native or Xamarin.
  2. You can't create android Home screen widgets using Flutter. You need a Native Java Code for creating.
  3. Flutter is still in alpha version. So libraries and plugins need to develop.
  4. It is new software so many services don’t support.
  5. It contains 6.7 MB for APK release.

How to Install Flutter in Windows 10

how to install flutter windows 10Pin

Step 1: Install Flutter 

First download flutter for Windows from the official website. It's just a zip file (file size approximately 697 MB).
Extract this file in your hard drive.

That's it.

Note: Place files inside the directory like  “C:\src\flutterapp” and do not place files inside directories like  “C:\Program Files\” which require elevated privileges.

Step 2: Set the Flutter installation path in the Environment variable

  1. In Windows search bar type env (To open Edit the System environment variables. It will open System Properties -> Advanced Tab.)
  2. Choose Environment variables.
  3. In User variable for [Your_User_Name] section, Click Edit button.
  4. Click New button and paste your flutter directory with bin folder (Here my installation location is C:\src\flutter\bin)
  5. Now click Okay to confirm your action.

Additionally, open the Command panel and Type/Run  flutter doctor -v to test the installation.

Restart the System to refresh the environment variables or use an alternative way (refresh the environment variable without reboot Windows.

Step 3: Install Android Studio

You can use any one of the code editors like Visual Studio code, IntelliJ IDEA to develop Flutter apps. But you must install Android Studio in your PC. Because using Android Studio,  you can easily install different Android SDK platforms like Android 5.1 (Lolipop) or Android 8. (Oreo) on your computer

If you don't install these SDKs in your PC, you can't use your Android device to test your Flutter apps.

install Android Studio and install SDKs platforms from Tools-> SDK Manager.

Then install Flutter and Dart plugins via File menu ->Settings -> Plugins.

Now your device is ready to develop Flutter apps.

Step 4: Try to create Dummy App for test

1.File -> New -> New Flutter Project -> Flutter Application

Error : If you get “flutter sdk path not given” error, choose your flutter directory in Flutter SDK Path (Mine: C:\src\flutter)

2. Android Studio will silently download some required files. So it will take some time to show the app UI.

3. Connect your Android phone. Tap the Allow Debugging option on your phone when it shows/popup.

4. Click Run button on Android studio.  click the Allow button on your phone to install the test app on your device.

If you want to use another code editors

IntelliJ IDEA

IntelliJ IDEA is one of the easy code editor to develop Flutter apps. Download free IntelliJ IDEA community edition and install in your computer.

If you want to setup this software for Dart and Flutter, its super easy. Just install Dart and Flutter and enter the path. I mean original Flutter installation directory and Dart path inside the Flutter folder.

About The Author

Scroll to Top
Share to...