[Flutter] 1. flutter란?

Flutter VS React Native

 

Flutter를 배우기 전에 대표적인 크로스 플랫폼 두개, Flutter와 React Native의 간단한 차이를 말하고자 한다.

 

1. 네이티브 앱 운영체제 상에서 가능한 위젯을 사용하고 싶을 때 (ex, ios 기본 위젯을 사용하고자 할 때)
2. → Rreact Native (안드로이드, ios 를 둘 다 동작 시켰을 때 OS의 따른 위젯으로 생성)
3. 세밀한 디자인 요구사항, 위젯 커스텀을 하고자 할 때
4. → Flutter ( 화면상의 모든 픽셀 100%를 커스텀 할 수 있다)

 

---

 

💡 flutter은 OS와 직접적으로 소통 X

 

 

 

• 우리가 만든 코드 (Dart)
  • animation, painting, gestures 를 포함하고 있음

 

flutter는 OS와 직접적으로 대화 하지 X

 

• 실제 UI를 렌더링하는데 책임져줄 Flutter 엔진
  • flutter은 엔진을 거쳐서 os와 소통
  • → 코드를 동작시키는 주체

 

• 엔진을 가동시키는 “runner” 프로젝트

 

💡 Flutter(Dart code) ↔ Engine ↔ OS

 

 

Q. Flutter는 내 운영체제에 내장된 플랫폼 widget을 사용하나요?

A. No → 엔진이 모든 것을 그려주기 때문에

• Flutter애플리케이션은 플랫폼의 native widget을 사용하지 않음
• 모든 UI는 렌더링 엔진에 의해 그려짐
  → 즉, 원래 네이티브 UI를 사용하는게 아님 (실제 운영체제에 의해서 그려지는 것 X)
  • OS가 제공하는 위젯의 제약을 받지 않는다는 점

 

---

 

Flutter setUp 명령어 

 

flutter clear
flutter create .

 

Flutter 설치 진단

 

flutter doctor

 

 

---

블루투스 연결을 하기 위해서 Flutter 중 quick-blue 를 사용하고자 했다. 

 

quick-blue setup

 

quick-blue 를 사용하기 위해 필요한 Setup 정리

 

1. flutter SDK 다운로드
2. 압축 풀기
3. flutter/bin 환경 변수 등록
4. vs code에서 dart, flutter 설
5. nuget 설치
6. nuget.exe를 flutter 폴더에 넣고 해당 위치를 환경 변수 등록
7. 개발자 모드 on

 

quick-blue 실행

 

import 'package:quick_blue/quick_blue.dart';

 

 

블루투스 스캔 : 주변 블루투스 기기 찾기

// scan 버튼 누르면 호출되는 함수
QuickBlue.startScan();

// 위 함수 이후에 scan 결과 보이는 함수
QuickBlue.scanResultStream.listen((result) {
  print('onScanResult $result');
});

 

result

• manufacturer Data (제조업체)
• diviceID
• name
• rssi

 

BLE 주변기기 연결

// 핸들러 등록
QuickBlue.setConnectionHandler(_handleConnectionChange);

// connect 시도
QuickBlue.connect(deviceId);

// 연결 상태 알려주는 ??
void _handleConnectionChange(String deviceId, BlueConnectionState state) {
  print('_handleConnectionChange $deviceId, $state');
}

 

state

• value : 연결 상태
• hashcode

 

→ state가 connected 일 때도 존재 ⇒ connect 성공