티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

Flutter 개발 Story
검색하기
블로그 홈

블로그 홈

Flutter 개발 Story

kimtaewookdeveloper.tistory.com/m
신고

flutter 개발하자 님의 블로그입니다.

구독자
1
방명록 방문하기
구독하기

주요 글 목록

  • Flutter 플러그인 VS 모듈 Flutter 플러그인은 Flutter에서 기본 기능을 사용할 수 있도록 하는 것이고, 모듈은 기존 기본 응용 프로그램과 통합하는 것이라고 한다. 다시 말해 플러그인은 안드로이드나 ios처럼 native와 관련된 개발이고, 모듈은 기존에 있는 flutter 기능을 사용하는 것과 관련된 개발이다. 공감수 0 댓글수 0 2021. 10. 7.
  • Oauth) 카카오톡으로 API 로그인하기 (with Firebase function) 참고 글 - https://sudarlife.tistory.com/entry/flutter-firebase-auth-%ED%94%8C%EB%9F%AC%ED%84%B0-%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%97%B0%EB%8F%99-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-part-7?category=1176193 공감수 0 댓글수 0 2021. 9. 14.
  • Explicit concurrent copying GC freed 4884(175KB) AllocSpace objects, 1(20KB) LOS objects, 89% free, 1485KB/13MB, paused 61us total 11.319ms flutter로 개발하다 보면, 위와 같은 로그가 뜬다. Explicit concurrent copying GC freed 4884(175KB) AllocSpace objects, 1(20KB) LOS objects, 89% free, 1485KB/13MB, paused 61us total 11.319ms 앱이 메모리를 사용하는데 있어서 GC(Garbage Collector)에 할당된 메모리까지 사용해 GC가 메모리를 비우는데 시간이 오래 걸리게 된다는 뜻이다. 공감수 0 댓글수 0 2021. 6. 1.
  • Isolate 사용방법 Isolate 사용 방법 compute의 경우 다른 예제 글들이 많으니 넘어가고, spawn의 방법에대해 알아보자. isolate간의 통신을 위한 방법은 RecievePort를 통해 하는 것인데, RecievePort - isolata간에 메세지를 주고 받을 수 있는 포트 - RecievePort는 sendPort를 반환하는 SendPort getter를 갖고 있음 SendPort - 지정된 RecievePort에 메세지를 보냄. - SendPort를 통해 전송된 메세지는 지정된 RecievePort에 전송되고, RecievePort는 해당 메세지를 RecievePort의 listener를 통해 받을 수 있다. Isolate.spawn Isolate.spawn(함수, recievePort.sendPort.. 공감수 0 댓글수 0 2021. 5. 31.
  • MethodChannel MethodChannel MethodChannel이란 비동기 호출을 사용해 플랫폼 플러그인과 통신하기 위한 채널이다. 즉, flutter와 Native(Android, IOS)사이에서 메세지를 통해 native 메서드 또는 plugin을 호출하는 것이다. 플랫폼 채널 flutter(Client)는 플랫폼 채널을 통해 IOS나 Android가 될 수 있는 호스트에게 메세지를 보냄 -> 호스트는 플랫폼 채널에서 메세지를 받고 플랫폼 네이티브 언어를 사용해 플랫폼 별 API를 호출해 flutter(client)에게 보냄 (메서드 호출은 전송되기 전에 binary로 인코딩 되고, 수신된 binary 결과는 dart값으로 디코딩됨.) 공감수 0 댓글수 0 2021. 5. 26.
  • Isolate vs Thread Thread 스레드는 독립적인 프로세스로 고유의 메모리를 갖고 있으며, 해당 메모리에서 작업을 실행한다. 또한 다른 스레드와 동시에 작업을 할 수 있다. 여기서 주목할 부분은 c나 java등의 언어에서 thread는 HeapMemory를 공유한다는 점이다. HeapMemory 프로그래머가 원할 때, 원하는 만큼 메모리를 할당받아와 사용하고 원할 때 반납(해제)가능한 메모리 - compiler나 cpu가 자동을로 메모리를 관리 하지않음 - 컴퓨터에 남아있는 메모리만큼 사용 가능 - 호출이 끝난다고 사라지지않음(반납(해제)해야 사라짐) 다시 돌아와서 c나 java등의 언어의 thread는 HeapMemory를 공유한다고 했다. 즉, 동일한 메모리에서 Main thread와 다른 thread 들이 있는 것이다.. 공감수 0 댓글수 0 2021. 5. 26.
  • Factory Factory란? Factory란 새로운 인트턴스를 생성하지 않는 생성자를 구현할 때 사용하는 키워드이다. constructor는 매번 인스턴스를 새로 생성해 비용이 많이 발생하지만, factory는 기존에 이미 생성된 인스턴가 있다면, 그 인스턴스를 return하여 재사용한다. 즉, constructor는 생성자를 호출하면 새로운 인스턴스가 만들어지지만, factory는 생성자를 호출하면, 최초에 생성된 인스턴스를 생성자가 호출될때마다 갖다 쓰는 것이다. constructor를 사용한 클래스는 항상 새로운 인스턴스를 리턴한다. (Book({this.title, this.description})을 호출해 새로운 인스턴스를 리턴) class Book { final String title; final Str.. 공감수 0 댓글수 0 2021. 5. 24.
  • Flutter _ Retrofit Retrofit Retrofit은 통신(networking) 기능을 사용하기 쉽게 만들어놓은 라이브러리이다. REST 기반의 서비스를 통해 json, xml등의 구조인 데이터를 쉽게 가져오고 업로드할 수 있다. Flutter에서 Retrofit 사용하기 Flutter에서 Retorfit을 사용하기 위해서는 6가지의 라이브러리가 필요하다 1. Retrofit 2. dio 3. json_annotaion 4. retrofit_generator 5. build_runner 6. json_serializable 위의 라이브러리를 하나하나 설명하자면 다음과 같다. 1. Retrofit - Retrofit 라이브러리는 위에서 설명한 바와 같다. (https://pub.dev/packages/retrofit) 2. .. 공감수 0 댓글수 0 2021. 5. 24.
  • 위젯) SingleChildScrollView SingleChildScrollView A box in which a single widget can be scrolled. 위젯 하나를 스크롤할 수 있게 해주는 위젯이다. 즉, Column등의 위젯을 이용해서 리스트뷰같은 효과를 낼 수 있는 위젯이다. 해당 위젯을 사용하려면 하나의 조건이 있다. SingleChildScollView를 감싸는 위젯이 높이를 알려주어야한다. 그렇지 않으면 높이를 모르겠다고 에러를 띄운다. 공감수 0 댓글수 0 2021. 5. 11.
  • Flutter BLE 다루기 Flutter BLE 다루기 Flutter에서 ble를 다루기 위한 대표적인 라이브러리는 flutter_blue이다. pub.dev/packages/flutter_blue flutter_blue | Flutter Package Flutter plugin for connecting and communicating with Bluetooth Low Energy devices, on Android and iOS pub.dev 세팅같은 것은 위의 글에서 설명해주는 데로 하면 된다. 해당 글에서는 ble를 다루는 방법을 아래와 같은 방법으로 설명할 것이다. BLE 다루기 순서 1. BLE 디바이스 스캔 2. BLE 디바이스와 앱 연결(페어링) 3. BLE 디바이스와 통신 사실 BLE 관련 글에서 위의 1번과 2번.. 공감수 1 댓글수 0 2021. 4. 30.
  • Provider 패턴 Provider란? UI와 데이터 처리 로직 분리를 위해 사용하는 기술이다. 즉, 데이터를 담당하는 애가 다른 애들한테 데이터를 알려주는 기술이라고 생각할 수 있다. Provider는 데이터 생산과 데이터 소비, 2가지의 구성으로 이루어진다. (데이터를 어떻게 생산하느냐에 따라 Provider의 종류도 달라진다.) 믹스인 - dart에서 클래스를 확장하지 않고 다른 클래스의 메서드나 변수를 빌릴 수 있는 기술인다. 키워드 - with Provider를 사용하는 순서는 아래와 같다. 1. 데이터를 생산하는 클래스를 만든다. - ChangeNotifier를 믹스인하는 클래스 ChangeNotifier는 Provider에서 setState없이 해당 기능을 할 수 있게 해주는 클래스로 notifyListener.. 공감수 0 댓글수 0 2021. 4. 26.
  • State란? 우리는 flutter를 개발하면서 State란 말을 많이 접하게 된다. 한국말로 번역하면 상태지만, flutter에서도 동일한 의미로 쓰일까? State Flutter에서 state는 데이터를 의미한다. UI를 통해 사용자에게 보여주는 데이터, APP을 통해 사용자와 상호작용하며 변화하는 데이터, 내부적으로 사용되는 데이터등이 이에 속한다. 그러면 StatelessWidget과 StatefulWidget은 각각 데이터가 없는 위젯과 데이터가 넘쳐나는 위젯을 의미하는 걸까? Flutter 공식 홈페이지에서 StatelessWidget - A widget that does not require mutable state. (api.flutter.dev/flutter/widgets/StatefulWidget-c.. 공감수 0 댓글수 0 2021. 4. 15.
  • StateManagement(InheritedWidget, Provider) InheritedWidget InheritedWidget은 flutter에서 Base class for widgets that efficiently propagate information down the tree라고 설명한다. 데이터를 트리 아래로 효율적으로 전파하는 위젯이라고 하는데, 잘 이해가 않간다. 그래서 구글링을 통해 InheritedWidget에대해 조사해봤다. 등장배경 - 기존에 위젯 트리내에서 데이터를 공유하기 위해서는 코드가 지저분해졌다. 이랬던 구조를 InheritedWidget이 등장하면서 코드를 깔금하게 만들어줬다. 1. InheritedWidget을 상속받은 subclass를 생성한다. 2. data를 위한 filed를 추가한다. 3. of메서드를 추가한다.(of는 데이터를 참조하.. 공감수 0 댓글수 0 2021. 4. 15.
  • Gradle exception 에러 잘 동작하던 Flutter가 갑자기 에러가 발생했다. 안드로이드 context를 찾을 수 없다는 등, Gradle expection은 create하라고 하는 등의 에러에 직면했다. 필자는 다음과 같이 해결했다. 우선 flutter의 버전을 업데이트하고, 안드로이드 gradle에 buildTypes { release { minifyEnabled false shrinkResources false} 을 추가했다. 그리고 sdk를 android 30으로 맞췄다. 추후에 해당 부분에서 왜 이런 에러가 발생했는지 자세히 알아봐야겠다. 공감수 0 댓글수 0 2021. 4. 5.
  • Future Future Future란 Flutter에서 미래에 요청한 데이터나 에러를 담을 박스를 의미한다. 데이터나 에러중 어느 것이 나올지 모르므로 두 가지 경우를 모두 대비한 함수를 구현해야한다. then - 데이터가 나올 경우 catchError - 에러가 나올 경우 예) futureNumber()는 데이터 타입이 Future이다. 즉, 미래에 요청할 데이터 타입이 int인 것이다. 결과에서 "기다리는 중" 이 먼저 나온 이유는 비동기이기 때문이다. 참고 - velog.io/@jintak0401/FlutterDart-%EC%97%90%EC%84%9C%EC%9D%98-Future-asyncawait 공감수 0 댓글수 0 2021. 4. 2.
  • A RenderFlex overflowed by ~ pixels on the bottom. A RenderFlex overflowed by ~ pixels on the bottom. RenderFlex RenderFlex는 하위 항목을 1차원 배열로 표시하는 것을 의미한다. 위의 에러는 아래쪽에 ~ pixels의 RenderFlex가 넘쳤다는 것을 얘기하는 것인데, 말그대로 ui가 차지할 공간이 부족하다는 것이다. 해당 에러를 해결하기 위해서는 widget을 SingleChildScrollView로 감싸줘야한다. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being size.. 공감수 0 댓글수 0 2021. 2. 17.
  • Flutter 기본_isolate Isolate란? Isolate는 모든 Dart코드가 실행되는 곳임. 마치 기계안의 작은 공간에 메모리 덩어리가 있는 것임. 단일 스레드가 이벤트 루프를 실행하고 있는 것 Dart에서는 스레드가 메모리를 가진 채로 isolate에 있음. 그리고 이벤트만 처리함. 만약 계산이 많은 경우 isolate.spwan이나 flutter 계산 함수를 사용하면 됨. 둘 다 새로운 개별 isolate를 만들어서 이를 처리하기 때문에 main isolate에 부담을 주지 않음. 기존의 isolate에 새로운 isolate가 만들어지며, 각각 할당된 메모리에서 각각 고유의 이벤트 루프를 갖게 됨. 하지만 기존 isolate에서 새로운 isolate에 접근할 수 없음. 그래서 이름이 isolate임. isolate들을 함께.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_ListView2 이전 kimtaewookdeveloper.tistory.com/23의 ListView는 그냥 무한 스크롤만 가능한 리스트 뷰였다. 여기서 더 나아가 ListView에 하트 icon을 추가하고, 하트 icon이 눌린 item만 있는 화면도 만들어보자. 이전 ListView와 달라진 부분은 RandomWordSate클래스이다. _saved 변수는 하트 아이콘을 통해 누른 값들을 저장할 set이다.(set은 배열과 같지만, 순서가 없고, 중복된 값을 허용하지 않는다.) 먼저 _buildRow 위젯을 보자. _buildRow는 이전 글에도 써 있듯이 ListView의 각 행을 리턴해주는 위젯이다. 추가된 부분은 alreadySaved변수, trailing, onTap이다. alreadySaved 변수는 인자로 .. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_ListView ListView Flutter에서 ListView는 ListTile로 구성된다.(ListTile을 행이라고 생각하면 쉽다.) ListView 사용법 ListView를 사용하기 위해서는 ListView.builder의 속성중 하나인 itemBuilder를 사용해야한다. itemBuilder는 익명함수 형태의 콜백함수를 받으며, 인자는 BuildContext와 행 반복자인 i를 받는다. itemBuilder는 행 하나하나의 item을 구성하는 것이라고 생각하면 쉽다. 예시 위의 예시를 보면 ListView를 구현하는 코드는 RandomWordState 클래스 안에 있다. _suggestions는 WordPair로 구성된 배열이다. ListView를 리턴하는 위젯은 _buildSuggestions이다. _bu.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_StatefulWidget 사용해보기 StatefulWidget 사용해보기 StatefulWidget을 사용하기 위해서는 최소 2개 이상의 클래스가 필요하다. - StatefulWidget을 상속한 클래스 (StatefulWidget을 상속한 클래스는 변경이 불가능함.) - StatefulWidget을 상속한 클래스를 generic으로 한 State를 상속한 클래스 (State를 상속한 클래스가 위젯의 수명동안 상태를 유지함) 예시. - RandomWords 클래스가 StatefulWidget을 상속한 클래스 - RandomWordState 클래스가 State를 상속한 클래스 Flutter가 StatefulWidget을 빌드하면, 즉시 createState()가 호출된다. 즉, 해당 코드에서는 Flutter가 빌드되면, MyApp의 buil.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본 _ 위젯의 개념과 라이브러리 추가하기 위젯(Widget) - 위젯이란 현재 구성과 상태(State)에서 화면이 어떻게 보일지를 정의한 것 Material 모바일 및 웹에서 표준으로 사용되는 시각 디자인 언어 (android 개발자라면 material design을 떠올리면 쉽다.) - Scafford 위젯 트리를 구성하는 app bar, title, body 속성을 기본으로 제공 Material 라이브러리의 위젯 중 하나 라이브러리 추가하기 1. pubspec.yaml의 dependencies: 아래 라이브러리 추가 (flutter에서 의존성 및 asset관리는 pubspec.yaml이 담당한다.) 2. pubspec.yaml의 상단의 pub get(package get)을 누른다. 3. 파일에 라이브러리를 import한다. ex)impor.. 공감수 0 댓글수 0 2021. 2. 15.
  • Flutter 기본_StatelessWidget과 StatefulWidget StatelessWidget - 이름 그대로 상태(State)를 갖지 않는 위젯 클래스 -> StatelessWidget 클래스 내부의 모든 UI 위젯들은 상태를 가질 수 없음 -> 상태가 없으니 상태의 변화를인지할 필요도 없고, 할 수도 없음 -> 그래서 화면이 생성될 때 한 번만 build 메서드를 호출해 화면을 구성한 후에는 build 함수가 다시 호출되지 않음 즉, StatelessWidget은 변화가 필요없는 화면을 구성할 때 사용하는 위젯 클래스이며, build 메서드는 한 번만 호출됨 StatefulWidget - 이름 그대로 상태(State)를 갖는 위젯 클래스 -> StatefulWidget 클래스 내부의 모든 UI 위젯들은 상태를 갖음. -> setState() - StatefulWid.. 공감수 0 댓글수 0 2021. 2. 15.
  • No connected devices found; please connect a device, or see flutter.dev/setup for getting started instructions. 에러 이 에러는 내용 그대로 Flutter와 연결된 디바이스가 없어서 발생하는 문제입니다. 이 에러를 해결하기 위해서는 우선 에뮬레이터가 있는지 확인해야 합니다. sda gphone x86(mobile)이 에뮬레이터의 위치입니다. 에러가 발생한 분들은 'no device'라고 떠 있을 것입니다. 구글에 이 문제를 검색해보면 대부분 에뮬레이터를 삭제했다가 새로 만들어 보라는 내용이 나옵니다. (dev.to/yafetissac/flutter-no-connected-devices-47bf) 저같은 경우는 위의 글을 참조하면서 더 세부적인 것들을 건드려서 해결했습니다. File -> ProjectStructure를 들어가면 위와 같은 이미지가 나옵니다. project sdk가 no sdk로 나오시는 분들은 자신에게 .. 공감수 0 댓글수 0 2020. 10. 26.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.