Foggy day

안녕하세요.인프런에서 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..

이번 포스팅에서는 Flutter와 IOS Native가 통신하는 방법을 알아보겠습니다. Flutter는 MethodChannel을 사용해서 각 플랫폼과 통신할 수 있습니다. 메소드 채널은 비동기방식이며 FIFO 순서를 보장합니다. 1. Flutter -> IOS 2. IOS -> Flutter 1. Flutter -> IOS 먼저 할 것은 메소드채널 클래스를 만들어주고, 채널명과 호출할 함수의 이름을 정하는 것입니다. 예제에서 채널명은 iosMethodChannel이고, 함수명은 talk입니다. Dart에서 talk라는 함수를 호출하면 IOS에서 String 문자열을 리턴할 예정입니다. Dart static const platform = MethodChannel('iosMethodChannel'); St..

해결방법 - Xcode에서 빌드 Flutter 프로젝트를 진행하면서 IOS 네이티브 쪽을 작업해야 할 경우가 있습니다. 그런데 Xcode에서 프로젝트를 열어보면 import Flutter 라인에서 no Such module 'Flutter'라는 에러 문구가 발생합니다. 물론 에러가 나온다고 Flutter 앱이 IOS에서 빌드가 안되는 것은 아니지만 코드 작업을 할 때 어려움이 있습니다. 이 문제를 해결하기 위해서 구글링을 많이 해보면서 여러가지 시도를 해봤지만 가장 확실한 방법은 Xcode에서 빌드를 돌리는 것입니다. 오류문구가 나온다 해도 시뮬레이터로 빌드를 돌려보면 오류가 곧 사라집니다. 빌드를 한 후에야 Flutter SDK가 인식되는 것 같습니다. 어떤 이유에서 발생한 문제인지 정확히 알 수 없지..

이번 포스팅에서는 EventChannel에 대해 알아보겠습니다. EventChannel(이벤트채널)이란? - 이벤트 채널은 플랫폼들이 이벤트 스트림을 사용해서 통신하는 방법입니다. 데이터 전송 방향은 Native -> Flutter입니다. 1. Dart EventChannel 2. Android EventChannel 1. Dart EventChannel 먼저 Dart 코드에서 이벤트 채널(스트림)을 등록해 보겠습니다. EventChannel 클래스를 생성해야 하는데 이때 생성자에 채널명을 넣어주세요. EventChannel 클래스의 receiveBroadcastStream 함수의 리턴 타입은 Stream이므로 listen 함수를 구현할 수 있습니다. listen 함수의 event에는 Native에서 전..

이번 포스팅에서는 MethodChannel에 대해 간략히 살펴보고, Android Native와 통신하는 방법을 알아보겠습니다. Flutter는 MethodChannel을 사용해서 각 플랫폼과 통신할 수 있습니다. 메소드 채널은 비동기방식이며 FIFO 순서를 보장합니다. 1. Flutter -> Android Native 2. Android Native -> Flutter 1. Flutter -> Android Native 먼저 볼 것은 Flutter에서 Android Native의 함수를 호출하는 방법입니다. - Flutter(Dart) Flutter 측면에서 호출하는 방식은 간단합니다. MethodChannel 클래스를 생성하고, 생성자에 채널 이름으로 원하는 문자열을 넣습니다. 그리고 invokeM..

채널 확인 flutter channel 채널 변경 flutter channel {} ex) flutter channel stable 업그레이드(최신 버전으로 업그레이드) flutter upgrade 다운그레이드(최신 버전보다 한 단계 낮은 버전으로 다운그레이드) flutter downgrade 특정 버전으로 변경 # flutter SDK가 설치된 디렉터리로 이동 cd ~/development/flutter git checkout 3.0.0 flutter doctor flutter --version