Installing Flutter - Ubuntu

on



If you are looking for alternative approaches to Android application development, you should consider giving Google's Flutter a try. Apps built with Flutter are largely indistinguishable from those built using the Android SDK, both in terms of looks and performance. What's more, with minor tweaks, they can be run on iOS devices as well.

You can look up here to get a better overview about Flutter.

Spoilers :

To build and run Flutter apps on iOS:
  • a computer running macOS
  • Xcode 9 or newer
  • iOS Simulator, or a physical iOS device
To build and run Flutter apps on Android:
  • a computer running macOS, Windows, or Linux
  • Android Studio
  • Android Emulator (comes with Android Studio), or a physical Android device

Installing Flutter

To get Flutter, use git to clone the repository and then add the flutter tool to your path.
  • If this is the first time you’re installing Flutter on this machine, clone the beta branch of the repository.
        • git clone -b beta https://github.com/flutter/flutter.git
  • Install essential dependency from Terminal.
        • sudo apt-get install lib32stdc++6
  • Run the following command to see if there are any dependencies you need to install to complete the setup:
        • flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately.

The first time you run a flutter command (such as flutter doctor), it downloads its own dependencies and compiles itself. Subsequent runs should be much faster.

  • Update your path :
    • Determine the directory where you placed the Flutter SDK. You will need this in Step 3. You can use below trick to get path incase you missed where you installed SDK.
        • export PATH=`pwd`/flutter/bin:$PATH
        • which flutter 
        • Copy path
    • In new Terminal, open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.
        • cd $HOME
        • sudo Touch ~/.bash_profile
        • nano ~/.bash_profile
        • Paste export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH in file and save
        •  source ~/.bash_profile to enable
  •    Verify that the flutter/bin directory is now in your PATH by running:
        • echo $PATH

Setting up IDE


Visual Studio Code (VS Code) setup

VS Code: A light-weight editor with Flutter run and debug support.Install VS Code

Install the Dart Code plugin
  • Start VS Code
  • Invoke View>Command Palette…
  • Type ‘install’, and select the ‘Extensions: Install Extension’ action
  • Enter dart code in the search field, select ‘Dart Code’ in the list, and click Install
  • Install Flutter Snippets using same procedure
  • Select ‘OK’ to reload VS Code
Validate your setup with the Flutter Doctor
  • Invoke View>Command Palette…
  • Type ‘doctor’, and select the ‘Flutter: Run Flutter Doctor’ action
  • Review the output in the ‘OUTPUT’ pane for any issues


Get Started: Test Drive

  • Start VS Code
  • Invoke View>Command Palette…
  • Type ‘flutter’, and select the ‘Flutter: New Project’ action
  • Enter a project name (e.g. myapp), and press Enter
  • Specify a location to place the project, and press the blue OK button
  • Wait for the project creation to continue, and the main.dart file to appear
The above command creates a Flutter project directory called myapp that contains a simple demo app that uses Material Components.

In the project directory, the code for your app is in lib/main.dart.

Run the app

  • Make sure a target device is selected in the lower, right-hand corner of VS Code
      • In case your phone isn't detected by IDE try below trick.
        • Make sure ADB is istalled
          • sudo adb kill-server
          • sudo adb start-server
        • Make sure USB debugging is enabled
        • Try switching to file transfer mode.
  • Press the F5 button on the keyboard, or invoke Debug>Start Debugging
  • Wait for the app to launch
  • If everything works, after the app has been built, you should see your starter app on your device or simulator.

Try a hot reload

Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state.
  • Open the file lib/main.dart in your favorite Dart code editor
  • Change the string
  • 'You have pushed the button this many times:' to
  • 'You have clicked the button this many times:'
  • Do not press the ‘Stop’ button; let your app continue to run.
  • To see your changes invoke Save (cmd-s / ctrl-s), or click the Hot Reload button (the green circular arrow button).
You should see the updated string in the running app almost immediately.

Location: New Delhi, Delhi, India

Comments

Post a Comment