Foggy day

이번 포스팅에서는 Android에서 SplashScreen을 적용하는 방법을 알아보겠습니다. 좀 더 정확하게는 앱 실행 후 launch activity가 나오기 전에 잠시 동안 나오는 window 화면의 UI를 수정하는 내용입니다. 아무 설정을 하지 않는다면 일반적으로 빈 화면이 노출됩니다. 여기서 말하는 SplashScreen은 SplashActivity를 말하는 것이 아닙니다. Android 12부터 사용 가능한 Splash API를 의미합니다. SplashActivity를 사용하지 않는 방법도 있지만, 예제에서는 SplashActivity와 SplashScreen을 둘 다 사용하겠습니다. 일반적으로 SplashActivity에서 처리해야 하는 작업들이 있기 때문입니다.  1. Dependency2...

안녕하세요.인프런에서 Flutter Web 강의를 개설하게 됐습니다. Flutter에 관심있는 분들에게 추천드립니다.  Flutter SEO에 대하여많은 Flutter 개발자들이 Flutter Web은 구글에서 검색이 안 되는 것으로 알고 있습니다. 저 또한 예전에는 그렇게 알고 있었습니다. 하지만 이는 잘못된 지식입니다. Flutter로 만든 Web도 구글에 검색이 되고, SEO 최적화 작업도 할 수 있습니다. 구글에 '샐링잇' or 'sailing-it'을 검색해보세요. Flutter로 만든 제 회사의 홈페이지가 검색되는 것을 볼 수 있습니다.(https://sailing-it.com/)물론 이를 위해서는 추가적인 작업들이 필요합니다. 그래서 직접 SEO 패키지(https://pub.dev/packa..

이번 포스팅에서는 Flutter web에서 마우스 드래그를 허용하는 방법과 MaterialScrollBehavior, ScrollBehavior에 대해 알아보겠습니다.   1. CustomScrollBehavior2. MaterialScrollBehavior 3. ScrollPhysics    1. CustomScrollBehavior Flutter웹에서 마우스 드래그가 안 되는 이유는 기본 세팅값에 mouse 드래그 허용 타입이 빠져있기 때문입니다. 때문에 MaterialScrollBehavior(extends ScrollBehavior)를 커스텀해서 PointerDeviceKind 타입에 mouse를 추가해주면 드래그가 가능합니다.  PointerDeviceKind에 대해 좀 더 자세하게 들여보겠습니..

이번 포스팅에서는 Flutter에서 image를 사전 cache 하는 법과 cache 된 이미지들이 어디에 저장되는지 알아보겠습니다. Asset 이미지들의 경우 실제로 사용할 때 초반에 잠시 깜빡이는 동작이 발생합니다. 이것은 아직 메모리에 로드되지 않았기 때문입니다. 사전캐싱 처리를 한다면 깜빡이는 동작 없이 바로 이미지를 보여줄 수 있습니다.   1. Image Widget2. PaintingBinding, WidgetsFlutterBinding3. precacheImage   1. Image Widget일반적으로 flutter에서 이미지 위젯을 구현할 때 image 관련 패키지를 사용하거나 flutter 자체에서 제공하는 Image 위젯을 사용합니다. Image 위젯에서는 한 번 이미지를 생성하면 ..

이번 포스팅에서는 Dart의 Isolate에 대해 알아보겠습니다. Isoate는 별도의 Thread에서 작업을 할 수 있도록 도와주는 클래스입니다. 시간이 오래 걸리는 작업을 하면서 화면은 계속해서 업데이트 하고 싶은 경우 사용하면 좋습니다.    1. 메인 스레드에서 작업2. Isolate.run3. Isolate.spawn  1.  메인 스레드에서 작업무거운 작업을 메인스레드에서 하게 되면 화면이 멈추는 현상이 발생합니다. 왜냐하면 Flutter는 기본적으로 단일 스레드를 사용하기 때문입니다. UI를 그리는 메인 스레드에서 무거운 연산 작업을 하게 될 경우 화면을 계속해서 업데이트할 수 없기 때문에 멈추는 것입니다. 이러한 것을 정크(jank)라고 합니다. 아래 메인 스레드에서 while문을 돌리는..

이번 포스팅에서는 AnimatedCrossFade 위젯에 대해 알아보겠습니다. AnimatedCrossFade는 두 위젯을 애니메이션 사용해서 바꿀 수 있도록 도와줍니다. 컬러나 텍스트 뿐만 아니라 사이즈 변경까지도 자동으로 애니메이션을 적용시킬 수 있기 때문에 매우 유용한 위젯입니다.    최종 동영상     first와 second 위젯을 지정해준 후에 crossFadeState 값에 어떤 위젯을 보여줄지 결정해주면 됩니다. 아래 예제에서는 first라는 변수로 구분해주고 있습니다. 간단하게 사용할 수 있으니 부가적인 설명은 생략했습니다. class Home extends StatefulWidget { const Home({super.key}); @override State createState..

최근 Kotlin으로 만든 Android Native앱을 업데이트 한 후 기존에는 없던 오류가 발생하는 일이 생겼습니다. 원인은 SharedPreference에 저장한 데이터의 형식이 변경됐기 때문입니다. 기존에 apple이라는 key로 int의 값을 저장했습니다. 업데이트 후에는 apple이라는 key의 타입을 Long으로 변경해서 사용했습니다. 개발을 할 땐 앱을 삭제 후 새로 설치하기 때문에 문제가 되는 것은 없었습니다. 하지만 일반 사용자들이 앱을 삭제하거나 데이터를 삭제하지 않고, 바로 업데이트해서 사용하는 경우 SharedPreference에 저장한 apple이라는 값의 type이 달라져서 오류가 발생했습니다. 운영하면서 경험해볼 수 있는 오류였습니다.

이번 포스팅에서는 Android의 접근성 서비스(AccessibilityService)에 대해 알아보겠습니다. 접근성 서비스는 기본적으로 장애가 있는 사용자를 위한 서비스입니다. 하지만 디바이스의 화면을 컨트롤 하기 위해 많이 사용되곤 합니다. Accessibility services should only be used to assist users with disabilities in using Android devices and apps https://developer.android.com/reference/android/accessibilityservice/AccessibilityService AccessibilityService | Android Developers developer.android...

HEX 투명도 HEX 투명도 HEX 투명도 HEX 투명도 00 0% 4F 31% 92 62% ED 93% 03 1% 52 32% A1 63% F0 94% 05 2% 54 33% A3 64% F2 95% 08 3% 57 34% A6 65% F5 96% 0A 4% 59 35% A8 66% F7 97% 0D 5% 5C 36% AB 67% FA 98% 0F 6% 5E 37% AD 68% FC 99% 12 7% 61 38% B0 69% FF 100% 14 8% 63 39% B3 70% 17 9% 66 40% B5 71% 1A 10% 69 41% B8 72% 1C 11% 6B 42% BA 73% 1F 12% 6E 43% BD 74% 21 13% 70 44% BF 75% 24 14% 73 45% C2 76% 26 1..

Android에서 Overlay 기능이 필요할 때가 있습니다. 예를 들어 네비게이션 앱처럼 앱을 백그라운드 상태로 두더라도 화면에 특정 View를 보여주는 것입니다. 이럴 때 사룔하는 것이 Overlay 기능입니다. 다른 앱 위에 우리가 설정한 View를 보여주고, 특정 로직을 수행할 수 있습니다. 이를 위해서는 권한 요청과 Service 클래스를 구현해야 합니다. Overlay를 사용할 때 주의할 것은 앱을 종료시키더라도 Overlay가 같이 종료되는 것은 아니라는 점입니다. 때문에 비즈니스 로직에 따라서 어떠한 경우에 overlay를 종료시킬지, 계속 살려둘지를 잘 설정해야 합니다. 또한 Service만 종료시키는 것이 아니라 View들도 직접 제거해줘야 합니다. 예제에서 구현한 기능 1. Overl..