반응형

요즘 Flutter 로 ble device를 다루는 작업을 하고 있습니다.

 

아시다 시피 BLE 장치들은 기존 BT classic과 다르게 broadcasting 기능을 제공하고 있어서 S/W로직을 기존 BT classic과 동일하게 가져가기에는 무리가 있습니다.

BLE 장치를 어떤 목적으로 어떻게 사용할것인가를 잘 구상 해야합니다.

구성 하고자 하는 장치를 미미(mimi)라고 합시다.

1.  미미에 탑재한 센서에서 읽은 값을 broadcasting 만 목적으로 한다. 

 => BLE advertizement

2. 미미에 탑재한 센서에서 읽은 값을 연결되었을때만 데이타를 읽어갈 수 있도록 한다.

 => BLE service characteristics

3. 미미에 탑제된 여러 장치들을 제어하려고 한다.

 => connect /read /write

보통 목적은 3가지 형태가 될것 같습니다.

 

1번의 경우는 BLE advertizement를 이용하는 방법을 사용합니다.

- connection 없이 모단말(ble에선 central이라 부름)에서 scanning을 할때 scanning 한 데이타를 활용합니다.

- 이를 위헤서 미미(ble장치)에서도 당연히 advertizement 에 데이타를 설정 해줘야합니다.

- spec이나 가이드 상으로는 advertizementdata에 service data 항목이 있어서 service id와 data를 설정할 수 있습니다.

- 그러나 이렇게 사용할 수 없다면, manufacturer data를 활용하는 방법으로 할 수 도 있습니다.

- 여러 단말에서 동시에 읽어갈 수 있습니다.

 

2번의 경우는 BLE service의 characteristic의 값을 읽는 방식을 취합니다.

- scan후에 scan된 기기에 connect하고 나서 data를 읽어가는 방식입니다.

- 1번의 경우에는 scan만으로 정보를 읽어갈 수 있지만, 보안상 취약합니다. 모든 기기가 값을 다 볼 수 있기 때문이죠.

- 이런 connection 방식은 1:1통신이기 때문에, 연결되고 나면 다른 기기에서는 scan이 안됩니다.

- 때문에 connect후에 data를 읽고 바로 연결을 끊어야 합니다.

 

3번의 경우는 2번과 유사한데 다만 scanning 과 분리해서 connect후 characteristic에 read/write를 하는 방식으로 처리합니다.

- serial 방식( classic 방식) 과 유사한 요청사항이죠.

- 하지만 serical에서는 연결후 data를 보내고 response를 받는 것만 고려 했다면, BLE에서는 특정 characteristic정하고 해당 characteristic 값에 data를 wrtie하고 notifiy 를 설정하고 read를 하는 방식이라, 단순한 기능 구현에는 번거로움이 있지만,

미미(mini, ble 장치)가 복잡하다면 각 기능 제어를 분리해서 사용할 수 있기 때문에 좋습니다.

 

 

device scanning 예제 입니다.

package 는 flutter_blue_plus 를 사용했습니다.

 

pubspec.yaml


  flutter_blue_plus: ^1.3.1

 

AndroidManifest.xml

project/android/app/src/main/AndroidManifest.xml

project/android/app/src/profile/AndroidManifest.xml

 

    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

 

Android platform 에서 GPS가 켜져있지 않으면, Bt device scan이 안됩니다.

그냥 BT 기기를 사용하는 입장에서는 GPS 없이도 device 인식이 가능한 것이 상식적일 것 같은데, 실제로 android에서는 그렇지 못합니다.

https://stackoverflow.com/questions/33045581/location-needs-to-be-enabled-for-bluetooth-low-energy-scanning-on-android-6-0

 

Location needs to be enabled for Bluetooth Low Energy Scanning on Android 6.0

After upgrading to Android version 6.0 Bluetooth Low Energy (BLE) scanning will only work if Location services are enabled on the device. See here for reference: Bluetooth Low Energy startScan on A...

stackoverflow.com

이럴경우  android:usesPermissionFlags="neverForLocation" 를 이용해서 scan이 가능하도록 설정 할 수 있습니다.

이 Flag는 상당히 미묘한데요.

위에 stackover flow 를 읽어보면, 위치정보를 기반으로 becon ble 등을 인식 하는 서비를 위해 GPS가 있을떄만 scan 이 되도록 한것 같은데, (그 외에 사생활 보안 등등의 이슈?? 도 있겠죠?)

서비스를 운영하는 입장에서 누군가가 GPS가 꺼져 있으니 동작 안합니다.(정확히는 BT가 scan 안됩니다). 라고 한다면, 답하기가 좀 곤란합니다. 

아무튼 플랫폼 정책상 GSP 꺼져있을때 scan이 안되도록 한 이유는 있겠지만, 우리는 항상 잘 BT 기기를 찾아야 하니 neverForLocation 같은 옵션을 사용하게 됩니다.

    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
    <uses-permission android:name="android.permission.BLUETOOTH_SCAN" 
                     android:usesPermissionFlags="neverForLocation" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

 

 

 

Sample code

import 'LabBleGenericController.dart';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';



class LabBleDeviceGenericPage extends StatefulWidget{
  const LabBleDeviceGenericPage({super.key});

  @override
  State<LabBleDeviceGenericPage> createState() => _LabBleDeviceGenericPageState();
}


class _LabBleDeviceGenericPageState extends State<LabBleDeviceGenericPage> {
  StringBuffer data =StringBuffer();

  LabBleGenericController controller= LabBleGenericController();

  bool connectAll = true;
  bool isScanning = false;

  startScan()async{
    print("start scan!!!!!!!");
    isScanning = true;
    controller.scan(
        onScan:(val)=>setState(() { }),
        onScanDone:(){
          setState(() { });
          if(isScanning) {
            startScan();
          }
        });
  }
  stopScan() async{
    isScanning = false;
    await controller.stop();
    setState(() {
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text("BleDevice")),
      body:Container(
        child: Column(children:[
          TextField(
            controller: controller.filterEdit,
            decoration: InputDecoration(prefix: Text("Filter:"),border: OutlineInputBorder()),
          ),
          SizedBox(height: 20,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              ElevatedButton(
                  onPressed: (){
                    setState(() { data.clear(); });
                    if(isScanning){
                      stopScan();
                    }else{
                      startScan();
                    }
                  },
                  child: Text(isScanning?"Stop":"Scan")),
              ElevatedButton(
                  onPressed: (){
                    connectAll?controller.connectAll(): controller.disconnectAll();
                    connectAll =! connectAll;
                  },
                  child: Text(connectAll?"connect all":"disconnect all")),
              ElevatedButton(
                  onPressed: (){
                      setState(() { controller.updateDevices();});
                  },
                  child: Text("update")),
            ],
          ),

          SizedBox(height: 50,),
          

          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(
                      child: Text(controller.devicesStatus)),
                  SizedBox(
                      child: Text(controller.getResult()))
                ],
              ),
            ),
          ),

         

        ]),
      ),
    );
  }

  @override
  void dispose() {
    controller.close();
    super.dispose();
  }
}

 

controller

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter_blue_plus/flutter_blue_plus.dart';
import 'package:get/get.dart';



class LabBleGenericController extends GetxController{

  StreamSubscription? sub;

  StringBuffer resBuffer =StringBuffer();
  final filterEdit =TextEditingController();
  
  final devices = <BluetoothDevice>[];

  LabBleGenericController(){
    filterEdit.text = "arbot";
  }


  @override
  void onClose() {
    print("LabBleGenericController:onClose()");
    sub?.cancel();
    super.onClose();
  }

  Future connectAll() async{
    for(final d in devices){
      d.connect();
    }
    updateDevices();
  }


  closeAll() async{


    for(final d in await FlutterBluePlus.instance.connectedDevices){
      await d.disconnect();
    }
    devices.clear();
  }

  disconnectAll() async{

    for(final d in devices){
      await d.disconnect();
    }
    updateDevices();
  }

  stop()async{
    await sub?.cancel();
    await FlutterBluePlus.instance.stopScan();
    sub= null;
  }

  scan({Function(ScanResult)? onScan,Function()? onScanDone}) async{

    await updateDevices();
    sub?.cancel();
    resBuffer.clear();

    await FlutterBluePlus.instance.stopScan();
    await closeAll();

    sub = FlutterBluePlus.instance.scan(timeout: Duration(seconds: 10)).listen((ScanResult result) {
      final localName = result.advertisementData.localName;
      if(!localName.toLowerCase().contains(filterEdit.text)) return;
      
      devices.add(result.device);
      
      print("localname:$localName");
      resBuffer.writeln(localName);
      resBuffer.writeln("[advertisementData]");
      resBuffer.writeln("manufacturerData:");

      int i =0;
      for(final k in result.advertisementData.manufacturerData.keys){
        final data = result.advertisementData.manufacturerData[k];
        resBuffer.write("\nkey($k):");
        if(data == null) continue;
        print("idx[$i]:${data.toString()}");
        print("str: ${String.fromCharCodes(data)}");
        resBuffer.writeln(" ${data.toString()}");
        i++;
      }
      resBuffer.writeln("[serviceUuids:${result.advertisementData.serviceUuids.length}]");
      i=0;
      for(final d in result.advertisementData.serviceUuids){
        resBuffer.writeln("[$i]: $d");
        i++;
      }
      resBuffer.writeln("serviceData:");
      i=0;
      for(final k in result.advertisementData.serviceData.keys){
        resBuffer.write("\n$k:");
        final data = result.advertisementData.serviceData[k];
        if(data == null) continue;
        print("idx[$i]:${data.toString()}");
        print("str: ${String.fromCharCodes(data)}");
        resBuffer.write("$data");
        i++;
      }
      print("buffer[${resBuffer.length}]:${resBuffer.toString()}");
      resBuffer.writeln("----------");
      onScan?.call(result);
    },
    onDone: (){
      sub?.cancel();
      onScanDone?.call();
      return ;
    });
  }

  String getResult(){
    return resBuffer.toString();
  }

  final _devicesStatus = "".obs;
  get devicesStatus => _devicesStatus.value;

  updateDevices() async{
    final buff = StringBuffer();
    for(final d in devices){
      buff.writeln("[${d.name}]: ${(await d.state.first).toString()}");
    }
    _devicesStatus.value =  buff.toString();
  }

  close(){
    sub?.cancel();
  }
}

 

해피 코딩!!

반응형

(2023년1월28일)

어제 시간이 좀 나서 flutter 3.2 버전으로 개발 진행해오던 프로젝트를 3.7로 업그레이드 해봤습니다.

아.. 뭔가 달라진게 있는지 custom 으로 작성한 theme 쪽에서 deprecated 된 것이 보이고,

화면 전환 이펙트( transit effect) 시 약간 부자연스런 것들이 보여서 여러번 시도하면서 로그들을 봤는데요.

현재 사용하고 있는 프로젝트에서 google map을 사용하고 있는데, 화면전환시 google map이 1~2 프레임(frame) 늦게 사라지는 것을 발견 했네요.

ㅠ_ㅠ 

 

3.7에서 다른 개선된 부분들이 많이 보이는 것 같던데, 저는 google map 때문에 당분간 3.2를 써야 할것 같습니다. 

 

(2023년 11월 14일)

구글맵의 심각한 버그입니다.

3.7에서 여전히 버그가 개선되지 않았습니다.

https://github.com/flutter/flutter/issues/118498

 

해당 문제는 Android 에서만 발생하는 것 같네요.

 

flutter 화면 전환시 google map 화면이 사라지지 않고 1 frame 남아있는 문제

 

 

 

해결책!!

해결책을 찾긴 했습니다. 

 Workaround !!!!

완전 버그 회피 코드이긴 한데, 당분간 이렇게 사용 해야 할것 같네요.

 

https://spikez.tistory.com/490

 

[Flutter] flutter 3.7 google map 버그 (frame이 남아있는 문제) - 2 (해결)

안녕하세요. Flutter Bug에 대한 해결책을 정리해볼까 합니다. https://spikez.tistory.com/456 [Flutter] flutter 3.7 google map 버그 (frame이 남아있는 문제) (2023년1월28일) 어제 시간이 좀 나서 flutter 3.2 버전으로 개

spikez.tistory.com

 

오랜시간 기다렸지만, 해결될 기미가 보이지 않아서 어쩔수 없이 회피 코드를 찾아서 작성하게 되었습니다.

 

!!! 해피 코딩!!!

 

 

#플루터 #버그 #3.7 #망했다. # 써보고 # 싶었는데... #유유 

반응형

[1.이미지(Image)]

[2.컬러(Color)]

[3.텍스트스타일(TextStyle]

 

3. 텍스트 스타일(TextStyle)을 enum으로 관리하는 방법

Text("hello", style: ResTextStyle.t1.bold())

 

 

TextStyle은 flutter ui에서 상당히 많이 사용됩니다.

당연히도 화면에 글지로 표시하여 사용자에게 정보나 의미를 전달해야 되기 때문이죠.(당연한 말이죠? ㅎㅎ)

제가 flutter를 사용하면서 TextStyle을 매번 지정하는 것은 상당히 번거로운 일이었습니다.

코드의 라인수도 늘어날 뿐 아니라 보기도 다른 코드들과 섞이면 흔히 말하는 시인성(코드의 리더빌리티, Readability) 가 떨어지게 되서 불편합니다.

또 코딩하다 text style을 지정할때 잠깐 머뭇거리면서 끈김 현상이 발생합니다(제 머리가요..)

 

TextField(
        controller: controller,
        readOnly: readOnly??false,
        minLines: 1,
        maxLines: 7,
        decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(vertical: W(75)),
            filled: true, fillColor: Color.fromRGBO(100,120,100,1.0),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(W(60)), borderSide: BorderSide.none),
            prefixIcon: icon,
            hintText: hintText,
            hintStyle: TextStyle(color: Color.fromRGBO(25,20,25,1), fontSize: 65, fontWeight: FontWeight.w500)),
    );

저는 이런점들을 좀 줄여보고자 몇가지 고민을 했었는데요.

일단 어플리케이션에 사용하는 폰트크기를 미리 정의하는 것이었습니다.

 

class ResFonts{
static cosnt int t1 = 65;
static cosnt int t2 = 58;
static cosnt int t3 = 48;
static const int m1= 24;
static const int m2= 18; 
static const int m3= 16; 
static const int m4= 10; 

 

이런 식으로 정의해서 사용했죠.

또 getTextStyle() 같은 함수를 만들어 사용해보기도 했는데요. 오히려 코딩시에 더 거슬리더군요.

 

최근 enum을 이용해서 간단 textStyle을 만들었는데 의외로 쓸만해서 계속 사용하게 되었습니다.

소개해드리겠습니다.

 

TextStyle 관리하기

제가 사용하는 textstyle 패턴은 아래와 같습니다.

텍스트와 텍스트스타일을 함께 사용하게 되는데 enum을 사용해서 쓰던 ResImage 와 유사하죠.?

Text("hello", style: ResTextStyle.t1.defStyle)

이렇게 사용하면서 상당히 코드의 시인성도 좋아지고 타이핑도 간결해져서 좋더군요.

 

어떻게 만들었는지 한번 보겠습니다.

 

enum을 정의하는 형식은 아래와 같습니다. 폰트의 크기와 기본 weight을 설정하는 형태이죠.

enum ResTextStyle{
  /** fontsize:68 */
  t1(FontWeight.bold, 68),
  /** fontsize:62 */
  t2(FontWeight.bold, 62),
  /** fontsize:58 */
  m1(FontWeight.normal, 58),//58
  /** fontsize:48 */
  m2(FontWeight.normal, 48),

이렇게 하기 위해서는 생성자(constructor)를 다음과 같이 만들어줘야 합니다.

 

final FontWeight fontWeight;
final double fontSize;

const ResTextStyle(this.fontWeight, this.fontSize);

fontWeight와 fontSize를 가지고 생성할 수 있도록 했죠.

다음으로  textStyle을 생성해주는 getter를 하나 만듭니다.

TextStyle get defStyle => TextStyle( fontWeight: fontWeight, fontSize: W(fontSize));

이렇게 하면 위에서 봤던 ResTextStyle.t1.defStyle 이런 방식의 사용이 가능해집니다.

 

저는 처음에 여기까지 해놓고 나서 사용하기 시작했는데, 불편한점들이 몇가지 있었습니다.

- 일단 색상 선택이 불가능하다

- 같은 폰트 크기인데 bold와 normal을 구분하고 싶다.

이런 문제들이 있어서 추가로 getter를 만들려다 함수를 만들게 되었는데,

bold(), normal() 이라는 함수를 추가로 만들게 되었는데, 이러고 나니 상당히 편리한 형태로 사용할수 있고 확장도 가능해졌습니다.

 

TextStyle normal({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.normal, fontSize: fontSize, overflow: overflow);
TextStyle bold({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.bold, fontSize:fontSize, overflow: overflow);

실제 사용시에는 다음과 같습니다.

Text("hello", style: ResTextStyle.t1.bold(color:ResColor.gray100)

이런식으로 font크기 + weight + color 가 가능한 형태가 되더군요.

IDE에서 쉽게 검색도 가능한 형태로 말이죠.

 

최종본


enum ResTextStyle{
  /** fontsize:68 */
  t1(FontWeight.bold, 68),
  /** fontsize:62 */
  t2(FontWeight.bold, 62),
  /** fontsize:58 */
  m1(FontWeight.normal, 58),//58
  /** fontsize:48 */
  m2(FontWeight.normal, 48),

  h1(FontWeight.normal, 65), //by ayeong
  ;

  final FontWeight fontWeight;
  final double fontSize;

  const ResTextStyle(this.fontWeight, this.fontSize);

  TextStyle get defStyle => TextStyle( fontWeight: fontWeight, fontSize: fontSize);
  TextStyle normal({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.normal, fontSize: fontSize, overflow: overflow);
  TextStyle bold({Color? color, TextOverflow? overflow}) => TextStyle(color: color??ResColors.grayScaleBlack, fontWeight: FontWeight.bold, fontSize: fontSize, overflow: overflow);

}

 

이렇게 해서 제가 사용하는 flutter에서 enum을 이용한 resource 관리 방법 3가지 소개해드렸습니다.

 

!! 해피 코딩!!

 

[1.이미지(Image)]

[2.컬러(Color)]

[3.텍스트스타일(TextStyle]

반응형

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리

2편 컬러 사용법입니다.

이 글을 쓸때 고민이 되었던 부분중 하나가 enum을 사용하여 관리하는 것이 좋을지 기존에 플루터에서 이미 사용하고 있는 방식으로 하는 것이 좋을지 무척 고민이 되었습니다.

이유는 color 부분은 딱히 enum으로 변경한다고 해서 큰 장점이 생긴다고 생각되지 않아서 였는데요. 그래서 간략히 flutter에서 Color 제공하고 있는 방식만 소개하고 넘어갈까 합니다.

 

 

Color color = ResColors.buttonBlue;

이런 방식은 이미 flutter에서도 이렇게 제공하고 있는 부분이 있죠? 이런 방식을 동일하게 사용하는 것입니다.

 

아래와 같이 상수로 컬러를 정의해서 사용하면 됩니다.

abstract class ResColors{

static const Color buttonBlue = Color.fromRGBO(0,0,255,1);

}

이렇게 어플리케이션에서 나만의 color pattern을 사용하는 것입니다.

[예제]

abstract class ResColors{
  static const transparent = Color.fromRGBO(0, 0, 0, 0);
  static const white = Color.fromRGBO(255, 255, 255, 1.0);
  static const black = Color.fromRGBO(0, 0, 0, 1.0);
  static const greenLight_50 = Color.fromRGBO(242, 251, 247, 1.0);
  static const greenLight_100 = Color.fromRGBO(233, 246, 237, 1.0);
  static const greenLight_100F = Color.fromRGBO(212, 229, 212, 1.0); //by karzia
  static const greenLight_500 = Color.fromRGBO(1, 183, 100, 1.0);
  static const greenLight_600 = Color.fromRGBO(25, 161, 77, 1.0);
  static const grayScaleL1 = Color.fromRGBO(247, 247, 247, 1.0);
  static const grayScaleL2 = Color.fromRGBO(244, 244, 244, 1.0);
  static const grayScaleL3 = Color.fromRGBO(238, 239, 241, 1.0);
  static const grayScaleL4 = Color.fromRGBO(237, 237, 237, 1.0);

 

그런데 왜 저는 컬러(Color)를 관리하려고 할까요?

이유는 간단한데요. 협업이 쉽기 때문입니다. 색상표(Color code)가 R,G,B, A 4가지 값을 각각 0~255  만큼 가지고 있는데, 숫자로 되어있습니다.

때문에 소스코드에서 어떤 색상이 어디에 사용되어있는지를 검색하기 쉽지 않습니다.

또 협업을 하게 되는 경우 다른 사람이 작성한 코드에서 컬러값을 찾기는 더 힘들죠.

디자인 가이드가 바뀌는 경우에는 더 많은 작업이 필요해 집니다.

 

예를 들자면, 위에 현재 confirm 버튼으로 사용하고 있는  색상이 RGBO(0,0,255,1) 인데 디자이너가 색상을 좀 옅게 바꾸고 싶어서  confirm 버튼으로 디자인 된곳을 모두 RGBO(100,100, 200,1) 로 변경한다고 합시다.

그러면 개발자들은 RGBO(0,0,255,1)로 된 곳을 모두 찾아서 변경 해야 합니다. 

간혹 빠진 곳이 생기겠죠? 또 개발자중 몇명은 아직 변경 사실을 모르고 있을 수도 있습니다. 그러면 어떤 화면은 적용이 늦어지겠죠.

 

만약 위에 설명드린것 처럼 ResColors와 같이 컬러 테이블을 관리하고 있다면 buttonBlue = Color.fromRGBO(255) 만  Color.fromRGBO(100,100,200,1)로 변경하면 어플리케이션 전체에서 색상을 찾아서 수정할 필요가 없어지겠죠.

 

그래서 보통 어플리케이션에서 사용하는 컬러를 상수나 enum으로 이름을 주고 관리를 하는 편입니다.

이렇게 하면 디자이너와 협업도 쉬워지는데요. 디자이너가 특정 요소의 색상을 바꾸고 싶을때 컬러테이블의 값도 같이 수정 해주고 개발자에게 알려주면, 개발자는 해당 컬러 테이블만 수정 하면 되거든요.

 

 

 

 

 

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리

반응형

플루터(Flutter)는 Dart 로 UI를 개발하기에 무척 편리한 프래임워크이죠.

실제로 플루터가 나오기 전까지 Dart 언어에 대해서 평가가 그리 좋지 않았지만, 플루터 이후에 평가가 완전히 뒤바뀌었죠.

 

제가 플루터로 어플리케이션을 개발하면서 쌓은 노하우중 하나가 어플리케이션 리소스를 enum으로 관리하는 것인데요.

어떤것인지 소개 드리겠습니다.

 

플루터로 UI를 꾸밀때, 기본적으로 필요한 요소들이 있는데요. 이미지, 컬러, 텍스트스타일, 레이아웃 등이 있죠.

이런것들을 관리하기 위해서 개발자 분들은 다양한 방법을 사용하고 있을텐데요.

 

저는 enum을 활용하는 방법을 소개하고자 합니다.

 

어떻게 enum으로 리소스를 관리하지? 라고 궁금증이 생기신 분들이 있을텐데요.

먼저 제가 왜 enum을 선호하는지 부터 알려드리겠습니다.

 

제가 프로그래밍을 하면서 리소스와 관련되서 종종 격었던 문제들이 있었습니다.

- 텍스트로 리소스를 정의하여 사용하는 경우, 오타로 특정 위치에서만 정상적으로 안나오는 상황

- 플리케이션 리소스를 정의하는 방법이 개발자 간에 서로 달라서 중복된 리소스를 사용하는 경우

- 필요 없다고 생각되는 리소스를 삭제해서 리소스가 안나오는 경우

- 혹시 사용되고 있을까봐 삭제하지 못한 리소스

 

주로 요런 문제들인데요. 아마 이런 문제들은 프로그래밍 언어와 상관없이 코딩을 하다보면 종종 격는 문제입니다.

 

Enum으로 리소스를 관리하게 되면 장점은,

- 컴파일시 (또는 editing시)에 에러를 바로 발견 할수 있다.

- 리소스 사용에 대한 검색이 쉽다.

 

단점은

- 리소스를 위해서 enum을 만들어야 하는 번거로움이 있다.

- 자칫 잘못 디자인 되면 사용이 복잡해진다.

 

저는 예전 경험으로 String을 enum으로 관리하여 유사한 문제점들을 줄였던 적이 있었는데, 이를 활용하여 "어떻게 하면 

코딩이 복잡하지 않고 리소스를 사용할 수 있을까?"에 대해서 고민하여 다음과 같은 방식을 만들게 되었습니다.

 

 

첫번째,

Container(child:Image.asset( ResImages.beast.path, width: 120) )

이미지 리소스를 ResImages.beast.path 이렇게 리소스를 사용하는 방법입니다.

위와 같이 사용하기 위해서는 이미지 리소스를 어떻게 정의할지 고민이 필요한데요. 저는 다음과 같은 방식으로 정의합니다.

enum ResImages{

  addDevice("beast.png"),
  battery("people.png"),
  check("dog.png"),
  dashDevLandS("cat.png"),
  dashDevProbeS("fox.png"),
}

현재는 에러가 발생할 것이고, 

이와같이 정의할 수 있게 하기 위해서는 생성자 (constructor)와 추가적인 내용이 필요합니다.

 

enum ResImages{

:

  final String name;
  const ResImages( this.name);
}

이렇게 하면 string을 enum 정의할때 사용 할 수 있게 됩니다.

다음으로 image path를 얻어오는 getter가 있으면 매우 편리해지겠죠?

 

  String get path => "assets/images/$name";

이렇게 enum에 getter를 추가해 줍니다.

 

이렇게 하면 ResImages.beast.path 로 리소스의 위치를 얻어올 수 있게 됩니다.

요즘 coding 환경( ide)가 좋아져서 ResImages. 까지만 치면 정의된 리소스를 모두 볼수 있으니 더더욱 좋죠.

getter는 필요에 따라서 다양하게 추가할 수 있겠죠? 작은 이미지를 따로 모아놔서 smallPath 를 추가한다던가, 에니메이션을 위해서 프래임을 나눠서 준비했다고 한다면 getFrame(int idx) 같은 식으로 말이죠.

 

최종 완성본은 다음과 같습니다.

enum ResImages{

  addDevice("beast.png"),
  battery("people.png"),
  check("dog.png"),
  dashDevLandS("cat.png"),
  dashDevProbeS("fox.png"),
    ;
  final String name;
  const ResImages( this.name);
  String get path => "assets/images/$name";
 
}

 

 

음, 여기서 고민이 되네요.

이미지, 텍스트 스타일, 컬러를 모두 블로그 한 페이지에 정리할지 아니면 나눠서 정리를 할지.....[10분 딜레이]..

스압을 피하기 위해서 나눠서 정리하기로 했습니다. ^^

 

추가로 관심있으시면 아래 링크 참조 부탁드립니다.

 

[1.이미지(Image)] 이미지 관리

[2.컬러(Color)] 색상 관리

[3.텍스트스타일(TextStyle] 텍스트 스타일 관리

 

반응형

RoundedContainer 

모서리가 둥근 container 는 종종 필요합니다.

Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: [your widget]
)

 

 

RoundedCorners clipping tip.

Rounded container를 만들고 나서 padding 을 없게 꽉 채우게 되는 경우에 corner가  clipping이 안됩니다.

그럴때 ClipRRect를 사용해서 clipping 합니다.

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

 

 

https://stackoverflow.com/questions/51513429/how-to-do-rounded-corners-image-in-flutter

 

How to do Rounded Corners Image in Flutter

I am using Flutter to make a list of information about movies. Now I want the cover image on the left to be a rounded corners picture. I did the following, but it didn’t work. Thanks! getItem(...

stackoverflow.com

 

 

 

반응형

코딩을 하다보면,  사용자 형식의 데이타 구조를 소팅해서 사용해야 하는 경우가 있습니다.

dart 의 List나 map 같은 자료구조에 보면, sort라는 함수가 있는데요. 

이를 활용하면 쉽게 구할 수 있습니다.

 

가장 기본적인 형태는 다음과 같겠죠.

Data라는 class가 있는데 이를 timestamp 기준으로 sorting이 필요하다고 가정하여 sample code를 작성해봤습니다.

class Data{
  int timestamp; // timestamp 로 
  String s;
  Data(this.timestamp,this.s);
  toString(){
    return "$timestamp:$s";
  }
}

List<Data> datas=[
  Data(1,"heee"),
  Data(4,"yyy"),
  Data(2,"kkk"),
  Data(3,"hhph")
];

comp(Data a, Data b){
  return a.timestamp - b.timestamp;
}

void main() {
  datas.sort((a,b)=> comp(a,b));
  
  
  for(final d in datas){
  print("${d.toString()}");  
  }
  
  
}

 

또,

일반적으로 timestamp를 사용할때 DateTime 을 사용하는 경우가 많은데요.

이런 경우 DateTime의 millisecondsSinceEpoch 을 이용하면 쉽게 처리 할 수 있습니다.

DateTime을 사용하지 않고 millisecondsSinceEpoch로 timestamp를 사용하기도 하죠.

class Data{
  DateTime timestamp; // timestamp 로 
  String s;
  Data(this.timestamp,this.s);
  toString(){
    return "$timestamp:$s";
  }
}



List<Data> datas=[
  Data(DateTime.utc(2022,1,25),"heee"),
  Data(DateTime.utc(2022,2,10),"yyy"),
  Data(DateTime.utc(2022,1,5),"kkk"),
  Data(DateTime.utc(2022,4,1),"hhph")
];

comp(Data a, Data b){
  return a.timestamp.millisecondsSinceEpoch - b.timestamp.millisecondsSinceEpoch;
}

void main() {
  datas.sort((a,b)=> comp(a,b));
  
  
  for(final d in datas){
  print("${d.toString()}");  
  }
  
  
}

 

해피 코딩!!

 

반응형

application 에서 실행중에 사용자가 퍼미션을 허용해야만 동작하는 module들이 있습니다.
이를 위해서 잘 만들어진 어플리케이션들은 퍼미션을 허용하는 UI를 제공하게 됩니다.

flutter에서 기본적인 퍼미션 허용하는 UI를 제공하는 방법을 소개합니다.

permission_handler [https://pub.dev/packages/permission_handler]

flutter에 permission_handler 라는 package가 있는데, 이를 이용하면 매우 쉽게 퍼미션을 설정 할 수 있습니다.


순서
Flutter에서 각 기능에 대한 퍼미션 설정을 위해서는 몇가지 파일들을 수정해야 하는데요.
순서를 한번 따라가 보겠습니다.

1. android manifest 에서 필요한 퍼미션을 추가합니다.
[project] /app/profile/AndroidManifest.xml
파일 안을 살펴보면 아래와 같이 use-permission 부분들이 있습니다.
필요한 퍼미션을 이 파일에 추가합니다.
저는 FINE_LOCATION과 BT 관련 퍼미션이 필요해서 다음과 같이 추가 했습니다.

<uses-permission android:name="android.permission.INTERNET"/>
<!-- 추가한 퍼미션 -->
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>



2. permission_handler를 flutter pub 설정 파일에 추가합니다.
[project]/pubspec.yaml
위 파일에 다음과 같이 추가합니다.
permission_handler의 version은 pub.dev 에서 확인하시면 됩니다.

permission_handler: ^10.2.0

그리고 pub get 하기

3. permission 요청 하기
자 이제 모든 준비가 끝났고, 필요한 시점에 퍼미션 요청을 하면 됩니다.
예를 들면 BT scan전에는 BT 퍼미션이 필요하겠죠? 그러면 BT scan 전에 BT 퍼미션을 요청하는 코드를 작성해서 넣으면 됩니다.
퍼미션을 요청 하는 방법은 사용자 편의성을 고려해서 적용하는게 좋겠죠?
매번 이렇게 필요한 기능을 수행할때 퍼미션을 요청 할 수도 있지만,
사용성을 해치지 않는다면, 앱 최초 실행후 전체 퍼미션을 요청하는 것도 하나의 방법입니다.

더 정교하게 permission 요청 로직을 작성할 수 도 있지만, 아래와 같이 간단한 퍼미션 요청 함수를 만들고,
widget build() 에서 호출해도 어플리케이션 동작에 영향을 주지 않을 겁니다.

아래 사용한 permission의 request() 함수는 이미 퍼미션이 있으면 아무것도 하지 않기 떄문입니다.
또 _permissionCheck() 함수는 async로 만들어 놨기 때문에 build 함수의 퍼포먼스에 영향을 주지 않습니다.
( 영향을 주기야 하겠죠~ ^^ 그러나 무시할 수 있을 만큼이란 의미로 받아들이면 좋겠습니다.)

  _permissionCheck() async{

    print("permission check");

    Map<Permission, PermissionStatus> status = await [
      Permission.locationWhenInUse,
      Permission.bluetooth,
      Permission.bluetoothConnect,
      Permission.bluetoothScan
    ].request();
  }
  
  
class DeviceControlPage extends GetView<DeviceController>{
  const DeviceControlPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(DeviceController());
    controller.prepare();

    _permissionCheck();
     :



    return Scaffold(
          resizeToAvoidBottomInset : false,
          body: Obx(()=>Column(
          ....
          );
  }



이상 완료!!!

즐거운 코딩 생황~

+ Recent posts