본문 바로가기
  • 포르쉐타고싶다

FLUTTER19

[flutter] GestureDetector 터치 범위 GestureDetector는 그 child로 아무리 큰 Container를 잡아도 최종 실제 위젯의 크기만큼만 터치범위가 설정된다. GestureDetector( . . behavior: HitTestBehavior.translucent, . . ) 따라서 이렇게 translucent속성을 통해 child의 크기 전부 터치 범위로 지정해줄 수 있다. 이는 배경을 누르면 keyboard를 내리게 할 때 역시 사용된다 2021. 8. 17.
[flutter] FLUTTER SDK installation is incomplete 에러 다른 버전의 Flutter SDK를 사용하다가 위와 같은 에러로 SDK를 사용하지 못하는 에러가 발생하는데 나같이 노트북을 잘 종료하지 않는 사람들은 자주 겪는 에러이다. Flutter 공식 문서의 지시사항을 잘 따른 다음에는(sdk 다운, 환경변수 설정, source ~~) 컴퓨터를 껐다켜야 해당 환경변수가 전역적으로 적용이 된다. (echo %PATH에 해당 sdk경로가 추가되었다고 적용이 된 것이 아니다! 가뜩이나 노트북 종료 안하는데 개고생했다.. 2021. 7. 9.
[flutter] 에러 "Flutter/Flutter.h not found." 에러 해결 문제: Flutter SDK가 동기화가 안되고 있는 상태, 아무리 flutter clean을 조져봤자 refresh되지 않고 위의 에러가 뜬다 해결: $ rm ios/Flutter/Flutter.podspec $ flutter clean 2020. 12. 20.
[flutter] Flutter 프로젝트에서 android 모듈을 켜고싶은데 버튼이 비활성화 되어있을 때: .iml파일 문제: 어떤 프로젝트의 android 모듈를 보고싶을 때, android 패키지에 오른쪽 마우스를 누른 다음 Flutter -> open Android Module in Android Studio 를 통해 열 수 있다. 그러나 어떤 프로젝트를 '클론'해서 보거나 할 때, 위의 Flutter 버튼이 비활성화 되어 안드로이드 모듈을 못 켜는 경우가 있다. 해결: 이 때 android 패키지를 보면 .iml 파일이 없을 것이다. 이 .iml 파일을 다른 플러터 프로젝트로부터 복사해 와서 이름을 [프로젝트명_android.iml] 로 붙여주고 다시 오른쪽마우스를 눌러보면 이제 활성화되어있을 것이다. 2020. 12. 19.
[flutter] 앱 출시와 앱 서명 앱을 완성하고 출시를 할 때 기본, 필수이지만 놓치는 부분이 있다. 바로 앱 서명 부분. 앱 서명을 왜 하는지 와닿지 않은 상태에서 따라만 하려니 디버깅할 때 되던 기능이 스토어를 통해 다운을 받으면 먹통이 되는 모습을 발견하게 된다. 나는 바보라서 어플의 카카오로그인이 안되고나서야 앱 서명이 뭔지 깨닫게 되었다. 기업의 거래과정을 보면 협상안을 기업의 회장이 보면 서명을 통해 확인했다는 인증을 남긴다. 그 서명은 그 거래가 나중에 법원같은 곳에서 증거 등으로 유효성을 따지게 됐을 때 공인된 것임을 인증한다. 서명에 대응되는 앱 서명키는 비슷하게 해당 앱이 인증된 개발자로부터 만들어진 앱이다 를 인증하는데 이용된다(앱서명키=서명, 개발자=회장, 타사 api회사=법원) 앱 서명키는 개발모드, 출시모드로 나.. 2020. 12. 12.
[flutter] 특정 위젯 rebuild에서 제외시키기: AsyncMemoizer flutter는 수 많은 rebuild가 이뤄진다. 대표적인 예로 TextField가 있는데 TextField를 클릭만 해도 rebuild가 일어난다. 이런 rebuild는 좋은 역할도 많이 하지만 방해할 때도 많다. 인스타그램에서 검색뷰를 보자 검색에서 검색어 입력창을 누르면 검색결과를 보여주는 화면전환이 일어나고 검색어를 입력한 뒤에 결과리스트 스크롤을 내리면 자연스럽게 결과리스트를 보게된다. 이렇게 간단해보이는 뷰도 불필요한 rebuild로 인해 구현되기 어렵다. 나는 검색어를 입력하면 1) 데이터를 불러오는 시간 2) 2초 딜레이 를 진행하는 future를 선언하여 검색결과 창안의 Future.builder에 적용하였다. 위의 future이 완료되지 않으면 로딩창이 나타난다. 하지만 불필요한 re.. 2020. 11. 9.
[flutter] TextField 타이밍 : Debouncing 검색기능 등에서 텍스트가 바뀔때마다 통신을 하게 구현을 했을 때 현실과 이상의 괴리가 발생한다. 이상: 원하는 텍스트를 '모두' 입력했을 때, 그 텍스트에 대해서 검색을 시도한다. 현실: 텍스트가 바뀔 때마다 '불필요한'통신을 모두 놓치지 않고 진행한다. TextField안의 onChanged에서 텍스트입력에 따른 통신을 바로 하지 않기위해 억지로 await Future.delay()를 중간에 끼고 통신을 뒤에 붙이는 시도를 해봤자 onChanged:() { setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 1)); getConnect() //통신시도 } 저 onChanged 콜백 자체는 텍스트가 아무리 빨리 바뀌어도 스.. 2020. 11. 5.
[flutter] Text를 중앙정렬하고싶은데 Center안에 넣어도, textAlign: TextAlign.center로 해도 중앙정렬이 안된다ㅜ : TextStyle(height:) 이용 Text를 중앙정렬하고싶은데 Center안에 넣어도, textAlign: TextAlign.center 를 설정해도 가운데정렬이 안되고 위의 공간이 남겨지고 아래로 치우치는 것을 볼 수 있다. 이유 기본적으로 텍스트는 의 형태로 설정이되고 사진을 보면 위의 공간이 기본적으로 부여되어있는 'Font metrics default height'로 지정되어있는 것을 볼 수 있다. TextStyle(..)의 height성분은 fontSize * height로 계산되어 저 Font metrics height로 설정할 수 있다. 해결법: Font metrics height를 Font size와 동일하게 해야 원래 우리 목적대로 여백이 없이 글자크기를 조절할 수 있다 Font metrics height = Font s.. 2020. 10. 26.
[flutter] /bin/sh: ~~~/flutter/packages/flutter_tools/bin/xcode_backend.sh:Operation not permitted 에러해결 Operation not permitted 에러는 위와같이 전체 디스크 접근 권한에 해당 앱(xcode)을 추가함으로써 해결할 수 있다. 2020. 7. 31.
[flutter] Row긴한데 기본적인 정렬이 들어가야할 때 : Stack + Align 1. 배경 Flutter에서는 정말 많은 위젯들을 제공하고 그 사용법 또한 간단하기 때문에 알기만 훨씬 효과적으로 ui를 짤 수 있어 아는것이 힘인 프레임워크라고 할 수 있다. 하지만 위젯이 많은 만큼 그 많은 위젯을 모두 외우기 힘들고 특정한 상황에서 어떤 위젯이 가장 어울리는지 결정하는것 또한 하나의 일이될 수 있다. 특정 상황에 걸맞는 위젯이 존재하는데도 그 당시에는 알지못하여 다른 위젯들을 사용하여 겨우겨우 구현해냈다가 걸맞는 위젯을 나중에서야 알게되어 '아..진작이 이 위젯을 알았다면..'하고 현자가 되는 경우가 다반사이다. (물론 필자같이 입문한지 얼마 안 된 개발자에 한해!) 아까말한대로 Flutter는 수많은 위젯들을 제공하지만 필자가 의외로(?) 고생한 부분이 '레이아웃'부분이다. Flu.. 2020. 6. 19.
[flutter] Flexible Flexible의 fit 속성 - FlexFit.tight: 아래 child의 높이가 뭐든 상관없이 다른 Flexible과 같은 비율을 차지하게 된다 import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Column( children: [ Flexible( flex: 1, fit: FlexFit.tight, //아래 child의 높이가 뭐든 상관없이 다른 Flexible과 같은 비율을 차지하게 된.. 2020. 6. 18.
[flutter] Future, 그리고 async await Flutter를 시작한 지 얼마되지 않은 개발자분들 중 필자같이 Future와 async await의 관계 혹은 차이에 대해 헷갈리는 분들이 있을 수 있다. 그 관계, 그리고 차이에 대해 예제와 함께 알아보겠다. 핵심은 다음과 같다 1. Future함수, async함수들을 모두 await하지 않았을 때 2. Future함수를 await! 3. async함수를 await! 4. Future함수를 갖고있는 변수의 Type결정(Future형 vs T형) 기본적으로 사용하는 예제는 다음과 같다 void main() { print('Main program: Starts'); printFileContent(); print('Main program: Ends'); } printFileContent() { Future.. 2020. 6. 18.
[flutter] Stack 에서 center horizontal 구현 1. 배경 이미지 위에서 텍스트들을 구현해야 할 일이 생겨 Stack을 사용하였는데 맨 위 중간(center_horizontal)에 제목을 구현해야했다. Stack의 children 안에서 어떤 Widget을 사용해야 Stack 안에서 center-horizontal을 구현할 수 있을까 2. 개념 Align: https://www.youtube.com/watch?v=g2E7yl3MwMk 3. 해결 Stack( . . ., Align( alignment: Alignment.topcenter, child: Container( margin: ..., child: [위젯] ) ) ) 이렇게 Stack안에서의 center_horizontal를 구현할 수 있다. 2020. 6. 16.
[flutter] CupertinoButton 사이즈 조정하기 1. 배경 CupertinoButton의 사이즈를 조정하려면 어떻게 해야할까. 2. 개념 CupertinoButton은 defualt로 설정되어있는 최소 사이즈(minSize)와 패딩값(padding)이 상당해서 처음 사용하는 사람들은 그 사이드를 조정하는데 애를 먹는다. 2. 해결 CupertinoButton 사이즈를 육안으로 설정하기 위해서는 1) 최소사이즈를 최대한 줄여주고(최대한 작게 0으로 설정하면 좋다) 2) 버튼 그 모습 자체 갖고있는 공간 외에 버튼이 차지하고 있는 공간 => padding값을 없애주어야 한다. 예시: CupertinoButton( minSize: 0.0, padding: EdgeInsets.all(0), child: Icon(...), onPressed: () {...},.. 2020. 6. 16.
[flutter-error] 에러 [SEVERE] Conflicting outputs were detected and the build is unable to prompt ... 해결 1. 배경 flutter에서 통신에서 가져오는 데이터의 모델에 대해 json 모델의 자동 직렬화를 위해 @JsonSerializable 를 사용하는데 factory [Model].fromJson(Map json) => ...); 에서 수동으로 일일이 매칭하는 것이 아닌 build_runner에게 맡기고 factory [Model].fromJson(Map json) => _$SearchFromJson(json); 이렇게 _$SearchFromJson을 넣고 flutter pub run build_runner build 명령어를 입력하면 build되면서 json파일의 직렬화 과정의 코드가 자동으로 생성된다. 이 과정에서 [INFO] Found 1 declared outputs which already exi.. 2020. 6. 14.