Intro to Flutter & installation

ios

App Development

What is Flutter?

There are many ways to build native app for ios and anroid. You can use swift or Objective-C for building ios app and Java for android. But the problem is... We need to learn all of programming languages to build those apps for that platform.

Google made flutter which is open-source development framework built with Dart language to build native app for ios and android in single code base.

Installation

First of all visit here Flutter Dev Site

widget_component

In this tutorial guide, i will use Mac OS as sample. Download Flutter SDK and open terminal

widget_component

  1. This is command that you can make folder which is name of "developement" in home directory
mkdir development 
1
  1. This is command that you cam make file ".bash_profile"
touch .bash_profile
1
  1. You will see that text editor is opened
open .bash_profile
1
  1. Type like below inside of .bash_profile
export PATH=~/developement/flutter/bin:$PATH
1

save it and close it. This is file path setup for computer to understand where flutter SDK is

$ cd development 
1
  1. Now let's move into "developement" folder we already made. This is command that you move into "developement" folder.

  2. Unzip "flutter_macos_v1.5.4-hotfix.2-stable.zip".

  3. Move Flutter SDK from "download" folder into "developement" folder

  4. Run this code in the same folder(which is'development') of Flutter SDK. Type this in terminal

source $HOME/.bash_profile
1
  1. Checkout whether flutter command is working
flutter doctor
1

ios Setup

  1. Install Xcode 9.0 or newer from via Apple Developer Site or Mac App Store

  2. Open Xcode and select agreement on it and check open ios simulator whether it is fully worked.

open -a Simulator
1
  1. Connect to ios device
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1

and then type command like below

brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
1
2
3
4
5

Type command like below in the flutter project directory and click "Runner" on left panel of Xcode. To deploy app into device, you will need to signin(Add account) with apple ID as developer.

$ open ios/Runner.xcworkspace
1

ios

  1. Connect ios device with mac and type code like below
$ flutter run
1

android Setup

  1. Install android studio from android studio website

  2. Open android studio and follow setup wizard.

  • Android SDK
  • Android SDK Platform-Tools
  • Android SDK Build-Tools
  1. Install android emulators
  • Open android studio
  • Select Tools on the top menu
  • Select AVD Manager

You will sed this AVD manager screen and click "Create Virtual Device" widget_component

Select Hadware widget_component

Select Android image version widget_component

More detailed info about AVD manager installation. Please click android AVD manager Installation

$ flutter emulators 
1

You will see message like below image. You will see 2 emulators. One is from ios and the other is from android. widget_component

To launch emulator what you want to test with, type like below code

$ flutter emulators --launch pixel
1

Test with android devices

To test with device, it should be Android 4.1 (API level 16) or higher.

  • Enable USB Debugging on Developer Option
  • Connect device via USB and authorize it
  • type "flutter devices" on the terminal
$ flutter devices
1

Check status of installation dependencies

You will see which dependencies need to be installed.

$ flutter doctor 
1

Setup an editor

In this guide, i will use VScode as sample.

widget_component

  1. Open Vs code editor
  2. Click View > Command Palette on the top menu
  3. Type install and select "Extensions: Install Extensions"
  4. Type "flutter" and click for installation