플로그

이전포스트에서 Method Channel을 다루면서 플러터가 네이티브의 OS정보를 가져올 수 있는 방법은 3가지가 있다고 설명 했었습니다. Method Channel : 단발적, 표준 메세지 코덱을 사용합니다 Event Channel : EventChannel은 stream 데이터가 필요할때 사용합니다. Basic Message Channel: Method Channel보다 더 기본적. 코덱을 커스텀하기위해 사용하는 방법입니다 MethodChannel을 사용하면 단발적인 요청으로 그에 대한 비동기적 응답을 얻을 수 있었습니다. 이번에 살펴볼 EventChannel은 단발적인 요청과 응답이 아니라, 채널이 열려있는동안 이벤트가 발생하면 지속적으로 데이터를 받아서 사용할 수 있도록 해줍니다. Event Ch..

아시다시피, 다트는 싱글스레드 언어입니다. 같은 싱글스레드 언어인 js에서는 eventLoop를 중요시 여기며 많이 들어보았는데, Dart의 eventLoop는 어떻게 동작하는지 궁금하여 찾아보게 되었습니다. dart는 isolate라는 독립적인 코드 실행 공간을 가지고 있는데요. flutter앱을 실행시키는 순간 isolate라고 불리는 프로세스가 생성된다고 합니다. 이 isolate는 내부적으로 하나의 eventLoop를 가지고 있고 두개의 관련 Queue를 갖습니다. dart의 isolate isolate는 별도의 메모리 공간에서 실행되는 독립적인 작업자로 스레드와 유사하지만 몇가지 다른 점을 갖습니다. isolate는 dart vm의 별도 인스턴스입니다. 각 isolate에 자체 메모리 힙, 프로..

해당 글은 공식문서와 chatGPT의 약간의 도움을 받아 작성되었습니다. (고마워 따봉 chatGPT야) 플러터 팀에서 초기 언어를 선택할 때 12개 이상의 언어를 선택해 평가하였다고 한다. 플러터는 다트를 선택하였는데, 플러터가 다트를 선택한 주요 이유들 중 하나는 바로 다트가 lock(앱이 실행이 중지되는 상태)없이 가비지 컬렉션을 수행할 수 있다는 점이였다. 많은 언어에서 가비지 컬렉션이 메모리를 수집하는 동안 lock 상태가 된다고 한다. 하지만 다트는 항상 가비지 컬렉션을 lock 없이 수행할 수 있다는 점에서 플러터 팀의 선택을 받은 것.. 그럼 다트의 가비지 컬렉터는 어떻게 lock 없이 가비지 컬렉션이 동작을 할까? Dart의 가비지 컬렉터는 두 개의 세대(generation)로 구성된다...

Flutter의 Widget을 사용할 때면 항상 마주하게 되는 것이 Key이다. Key는 다음과 같은 모습으로 처음 눈에 띄게 된다. class MyWidget extends StatelessWidget { const MyWidget({super.key}); @override Widget build(BuildContext context) { return const Placeholder(); } } StatelessWidget을 상속받을 때 생기는 template의 super.key가 바로 앞으로 살펴 볼 Key 타입의 파라미터이다. 0. Key Key 클래스의 정의는 다음 파일에서 찾을 수 있다. .../flutter/lib/src/foundation/key.dart abstract class인 Key에..

Sliver란? A sliver is a portion of a scrollable area that you can define to behave in a special way. You can use slivers to achieve custom scrolling effects, such as elastic scrolling. 사용자가 특수한 동작을 수행하도록 할 수 있고, 스크롤이 가능한 영역을 말합니다. 플러터에서 Sliver를 사용한 기본 위젯 Flutter에서는 ListView, GridView, SingleChildScrollView 등 Sliver를 사용하지 않는 스크롤 가능한 위젯을 기본으로 제공합니다. 이러한 위젯들은 간단하고 직관적이며, 일반적인 스크롤 동작을 구현하는 데 적합합니다. 언..

Flutter Framework 내부의 위젯 종류에는 크게 3가지 정도가 있다. StatefulWidget, StatelessWidget, InheritedWidget StatefulWidget과 statelessWidget은 지난 글에서 내용을 확인 할 수 있고, 그 다음 InheritedWidget에 대하여 알아보고자 한다. InheritedWidget InheritedWidget은 정보를 트리 아래로 효율적으로 전달하기 위한 위젯의 기본 클래스다. class FrogColor extends InheritedWidget { const FrogColor({ super.key, required this.color, required super.child, }); final Color color; stati..

왜 Dart일까? 정적 컴파일, 동적 컴파일 체리픽 프로그램 실행 방식 정적 컴파일 방식: AOT(Ahead Of Time), Static Compilation 정적인 방식이다. 실행 전에, 고급 언어의 명령어들을 컴파일러를 통해 기계어나 중간 언어로 변환한다. 변환된 기계어를 실행한다. 장점: 실행 속도가 빠르다. 컴파일 과정중에 성능 최적화가 가능하다. 단점: 컴파일 과정의 시간이 오래 걸린다. 예시: C/C++, Java, 인터프리터 방식: JIT(Just In Time), Dynamic Interpretation 동적인 방식이다. 실행 중에, 고급 언어의 명령어들을 한 번에 한 줄씩 인터프리터를 통과시켜 중간 언어로 변환한다. 한 줄의 명령어가 변환되면 바로 실행한다. 장점: 빠르게 수정하고 테스..

요즘 센트리에서 발생한 에러를 추적하면서 네이티브 기기에대해 이해할 필요하다는 생각이 들었습니다. 그러던 중 플러터에서 네이티브 기기들의 속성을 가져다쓸때 사용하는 Method Channel에 대해 궁금증이 생겨 이번 주제로 정해 보았습니다. 잘못된 부분과 보충할 부분을 공유 해주신다면 정말정말 감사하겠습니다! 언제 사용할까? 앱을 만들다보면 notification, app lifecycle, sensor, camera, battery, sound, connectivity, device information, geolocation 등 플랫폼에 특화된 API의 사용이 필요할 때가 있습니다. 플러터로 플랫폼 코드의 사용을 도와주는 패키지들이 많이 있지만, 마땅한 패키지가 없을때 직접 플랫폼별 코드를 작성할 ..

Flutter내에서 레이아웃을 잡는 위젯으로 보통 Row와 Column을 사용합니다. Row와 column은 동일하게 children으로 자식 요소들을 가질 수 있습니다. Row위젯을 먼저 살펴보도록 하겠습니다. Row는 X축을 기준으로 정렬하며 MainAxisAlignment라는 인자를 사용하여 정렬합니다. 아래는 spaceBetween을 사용하였고 기기의 전체 사이즈에 맞춰서 공백을 나눠 정렬해줍니다. 코드를 실행하면 UI는 이렇게 그려집니다. UI에서 맨 오른쪽 위젯이 기기의 남은 사이즈를 전체 다 차지해야 한다면 Expanded나 Flexible 위젯으로 감싸줄 수 있습니다. Expanded와 Flexible은 남은 공간을 모두 차지한다는 공통점이 있습니다. 두 위젯의 큰 차이점은 Flexble ..

.../flutter/lib/src/widgets/framework.dart 에는 각종 Key 클래스들과, BuildContext, Widget, Element 등이 선언돼 있습니다. Flutter 위젯의 두 축을 이루는 StatelessWidget과 StatefulWidget도 해당 파일에 선언돼 있는데, 항상 사용하기에 앞서 고민을 하게 만드는 StatefulWidget에 대해 조금 더 알아보고자 합니다. StatefulWidget은 Widget을 상속하는데, Widget은 다시 DiagnosticableTree라는 디버깅용 클래스를 상속합니다. 실질적으로는 Widget이 최상위 추상 클래스인 거죠. Flutter 팀에서는 Widget 클래스 상단에 다음과 같은 주석으로 설명을 시작합니다. Descr..