안녕하세요~ totally 개발자입니다. 컨테이너 안에 텍스트를 넣는 경우 가로 길이를 원하는대로, 반응형으로 하기 원하시는 분들이 있으실 겁니다. 보통 아래와 같이 일반적으로 컨테이너 위젯 안에 단일 텍스트 위젯 구성으로 되어 있으면 자동으로 이것이 가능하지만Container( child: Text("HELLO WORLD"),), Row 위젯 등 여러 위젯들과 같이 복합적으로 사용될 때에는 IntrinsicWidth 같은 위젯 사용이 필요합니다.예를 들어, 2개의 텍스트가 있는 박스가 Row 위젯 안에 들어있다고 가정합니다. 코드는 아래와 같습니다. Row( children: [ Expanded( child: Container(color: Colors.blue, child: Tex..

안녕하세요~ totally 개발자입니다. 앱을 개발하다보면 HTML 코드를 표시해야 하는 경우가 생기는 데, 그 경우 사용하기 좋은 패키지가 있습니다. 바로 simple_html_css입니다.  자세한 사용법은 아래 문서를 참고하시기 바라며 예제를 통해 바로 실습해보도록 하겠습니다.https://pub.dev/packages/simple_html_css simple_html_css | Flutter packageThis package allows you to use simple HTML and inline CSS styles to style your text in flutter. A fork of css_text package.pub.dev Step 1: 먼저 pubspec.yaml 파일에 simple_..

안녕하세요 totally 개발자입니다. 오늘 이 시간에는 GetX 상태 관리 패키지, Dio를 이용하여 setState 사용 없이 간단하게 상태를 업데이트할 수 있도록 리스트를 만들어 보겠습니다. 페이지 1개, model 객체 1개, controller 1개씩 이용하여 만들어보도록 하겠습니다. 데이터는 https://jsonplaceholder.typicode.com/todos 여기에서 받아오도록 하겠습니다. GetX의 기본 원리는 아래와 같습니다. 1) 기존 MaterialApp 대신 GetMaterialApp으로 감싸줍니다.2) UI에서 사용될 페이지가 로딩됩니다.3) 페이지에서 사용할 상태를 컨트롤러를 등록 및 활용하여 업데이트한다.4) GetX, GetBuilder, Obx 등의 위젯을 사용하여서..

안녕하세요 totally 개발자입니다. 이 포스팅에서는 debounce 개념을 사용하여 함수의 중복 호출을 막아보도록 하겠습니다. 저번에 다루었던 throttle과 달리 debounce는 함수가 여러 번 호출되었을 때 맨 마지막에 호출한 것만 실행합니다. 그래서 예를 들어 텍스트를 입력할 때 텍스트 변화를 감지하는 onChange 혹은 숫자를 늘리는 행위 즉 장바구니 등의 경우에 사용할 수 있는 방법입니다. 먼저 간단한 작동 구조를 먼저 살펴보면 아래와 같습니다.1. Debounce 변수 선언 (예를 들어, 1초 동안 동일한 값을 마지막에 호출한 것만 체크하겠다는 변수)2. Debounce를 적용할 함수 선언 (예를 들어, 이메일이 올바른지, 중복되는지를 체크하겠다는 함수)3. 위 2번에서 선언한 함수를..

안녕하세요 totally 개발자입니다. 이 포스팅에서는 플러터 패키지 중 debounce_throttle을 사용하여 Throttle 개념을 적용해보도록 하겠습니다. 우선 Throttle의 사용 목적에 대해서 알아야 합니다. 이 포스팅 이후에 Debounce에 대해서도 다룰 것이지만 Throttle과 Debounce는 비슷해보이나 서로 다른 목적을 가지고 있습니다. Throttle은 일정한 주기 동안 특정 함수가 여러 번 호출된 경우 함수를 한 번만 바로 실행하고 연속적으로 함수를 호출하는 것은 방지할 수 있습니다. 반대로 Denounce는 정해진 시간 동안 특정 함수가 여러 번 호출된 경우 마지막으로 실행된 함수를 호출합니다. Throttle특정 시간 동안 여러 번의 함수 호출이 있을 경우 함수를 한 번..

안녕하세요~ totally 개발자입니다. 지난 포스팅에서는 Voice Call(음성통화)에 대해서 살펴보았고 이어서 Video Call(영상통화)을 구현해보도록 하겠습니다. 지난 포스팅에서 소개한 Voice Call을 구현하지 않으신 경우에 권한 등 여러 세팅이 필요하기 때문에 지난 포스팅을 보시고 오셔야 합니다. https://totally-developer.tistory.com/197 [002] 플러터 (Flutter) & 아고라 (Agora) 연동 - Flutter 음성 통화(Voice Call) UI 및 기능 구현 안녕하세요~ totally 개발자입니다. 지난 포스팅에서는 아고라(Agora) 기본 세팅을 마무리하였고 이번 포스팅에서는 Agora를 이용해서 플러터에서 음성 통화를 구현해보도록 하겠습..