Skip to content

Flutter

  • A tool to build native cross-platform apps (iOS, Android, etc)
  • It uses the react-style (or declative-style) to render the screen
  • Flutter is the SDK with tools to compile your code to native machine code
  • Flutter is the Framework (Widget Library) for Dart
  • Has the UI building blocks (widgets), utility functions, packages, etc

Installation

# git
git clone "https://github.com/flutter/flutter.git" -b "stable"

# pacman
paru "flutter"
gpasswd -a "myuser" "flutterusers" # add your username to "flutterusers" group

# brew
brew install --cask "flutter"

# environment variables
export FLUTTER_ROOT=$HOME/flutter
export PATH=$FLUTTER_ROOT/bin:$PATH

flutter precache # precache development binaries
flutter doctor

Android Setup

  • Android Studio Components
  • SDK Platform
    • API 32, API 31, ...
  • SDK Tools
    • android-sdk-platform-tools: adb, fastboot
    • android-sdk-cmdline-tools-latest: sdkmanager, avdmanager
    • android-sdk-build-tools: aapt, aidl, dexdump, dx, llvm-rs-cc
    • android-emulator: virtual device
# pacman
paru "android-studio"

# flatpak
flatpak install "com.google.AndroidStudio"

# brew
brew install "android-studio"
  • Sdk Path
  • On Mac: ~/Library/Android/sdk
  • On Linux: ~/Android/Sdk
  • ... or find it out on android studio preferences
# environment variables & path https://developer.android.com/studio/command-line/variables
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$ANDROID_SDK_ROOT/emulator:$PATH
export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH
export PATH=$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$PATH
export PATH=$ANDROID_SDK_ROOT/build-tools/34.0.0:$PATH

# Setup android SDK for flutter
flutter config --android-sdk "/path/to/sdk" # optional if the sdk is already in a default path
flutter doctor --android-licenses
flutter doctor
  • Android Physical Device
  • Enable "USB debugging" under "Developer options"
  • Connect the device and enable "PTP" under "USB Preferences"
  • Allow permanent USB debugging

iOS Setup

  • First install Xcode from Mac App Store
  • It is installed at /Applications/Xcode.app
# Set default Xcode version (optional - that should be done automatically when installed Xcode)
xcode-select --switch /Applications/Xcode.app/Contents/Developer
xcodebuild -license accept
xcodebuild -runFirstLaunch

# Simulator: "File > Open Simulator"
open -a Simulator

Other tools

pacman -S "dart" # optional (it's already bundled with flutter)
pacman -S "android-tools" # optional (adb & fastboot)
paru "google-chrome" # optional (for web applications)

VScode

  • "Flutter" and "Dart" extensions
  • Ctrl + F5: Start without debugging
  • "Flutter: Launch Emulator" to launch android
  • Type st for snippets for creation of stateless/ful widgets

Project Structure

  • .idea/: configuration for android studio
  • .vscode/: configuration for vscode
  • android/: complete native android project
  • build/: compiled dart code
  • ios/: complete native ios project
  • lib/: dart source code (contains the main.dart entrypoint)
  • test/: automated tests
  • .gitignore: git ignore
  • .metadata: metadata of the projeto (managed by flutter)
  • .packages: packages info (managed by flutter)
  • *.iml: internal dependencies (managed by flutter)
  • pubspec.lock: lock package versions from pubspec.yaml
  • pubspec.yaml: project metadata & depedencies info
  • README.md: project general information

Flutter vs. React Native vs. Ionic

  • Flutter
  • Dart + Flutter
  • Compiled Native Apps
  • Does not compile to (Android/iOS) UI Components (it manually create the elements and control every pixel)
  • Mobile apps, Web app, desktop apps
  • Developed by Google
  • React Native
  • Javascript/React.js,
  • Partly compiled (UI Components) Native Apps
  • Does compile to (Android/iOS) UI Components (uses the native components of the target platform)
  • Mobile apps or react native web app
  • Developed by Facebook
  • Ionic
  • Javascript (any or no framework)
  • Webview-hosted web apps
  • Does not compile to (Android/iOS) UI Components, because it's actually a webapp
  • Mobile, web, desktop (with electron)
  • Developed by Ionic