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

인포테인먼트 - development/flutter26

[flutter] GestureDetector 터치 범위 GestureDetector는 그 child로 아무리 큰 Container를 잡아도 최종 실제 위젯의 크기만큼만 터치범위가 설정된다. GestureDetector( . . behavior: HitTestBehavior.translucent, . . ) 따라서 이렇게 translucent속성을 통해 child의 크기 전부 터치 범위로 지정해줄 수 있다. 이는 배경을 누르면 keyboard를 내리게 할 때 역시 사용된다 2021. 8. 17.
[flutter] statusBar for android and ios build에 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( //상태바 색 -> 근데 ios에는 적용 안됨 statusBarColor: Theme.of(context).backgroundColor, // 상태바 글자색 // For Android. // Use [light] for white status bar and [dark] for black status bar. statusBarIconBrightness: Brightness.light, // For iOS. // Use [dark] for white status bar and [light] for black status bar. statusBarBrightness: Brightness.dar.. 2021. 5. 24.
[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] 에러: Execution failed for task ':app:compileFlutterBuildDebug'. 뒤로의 모든 에러해결과정 = Flutter SDK를 바꿔주면 통로가 뚫린다 아이클라우드를 업데이트를 했는데 어김없이 생뚱맞은 플러터 프레임워크에서 에러가 터졌다. 처음엔 식은땀이 줄줄 났던 프레임워크 에러,, 이제는 반갑기만 하다 가장 먼저 시비를 건 에러는 Execution failed for task ':app:compileFlutterBuildDebug'. 라고하는 에러였다. 여러 에러를 만나봤지만 이 문구는 처음보는 에러였다. 구글에 검색해서 모든 명령어를 따라해봤지만 해결되지 않았다.. flutter clean을 거의 100번 이상 돌린 것 같다.. 여기서 flutter upgrade였나 에러가 해결 되기는 무슨 다음단계(?)로 넘어갔다.  스튜디오에선 Process 'command '/Users/apple/Documents/SDK/flutter/bin/flutter.. 2020. 12. 8.
[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] 에러명: "Could not run build/ios/iphoneos/Runner.app on 68bd22b2230c55763eee72ab745a940e3daec7c1.Try launching Xcode and selecting "Product > Run" to fix the problem: open ios/Runner.xcworkspace" 해결 여러 이유에서 Could not run build/ios/iphoneos/Runner.app on 68bd22b2230c55763eee72ab745a940e3daec7c1. Try launching Xcode and selecting "Product > Run" to fix the problem: open ios/Runner.xcworkspace 라는 에러가 뜨면서 빌드는 success 하지만 새로 설치가 되지 않는 경우가 있다. 대표적인 케이스가 또하나 있는데 바로 중간에 signing 문제때문에 xcode에서 Bundle Identifier를 변경하게 되었을 때 기존에 기종에 설치되어있던 동일 어플이 그대로 존재한 채 다시 run을 하게되면 그 둘이 겹쳐서 위와같은 오류가 발생하게 된다 해결법: Bu.. 2020. 10. 21.
[flutter] CachedNetworkImage precaching : 미리 캐싱하여 다음 뷰에 바로 나타날 수 있게 하기 Hero를 이용하는데 이전화면 -> 이후화면으로 들어갈 때 이전화면에서 List에 들어있는 이미지들은 Caching문제로 resizing된 이미지를 보이고 있고 이후화면에서는 원본화질을 보이고싶었다. Hero로 넘어가지만 이후화면에서의 원본의 Caching 타이밍이 너무 길어 원본사진 공간에서 Caching하는 동안의 빈공간화면이 노출된다. placeHolder에서 resizing된 이미지를 보이려고 하지만 빈공간이 보여지는 순간은 사라지지 않는다. 그래서 이전화면의 리스트에서 한 아이템를 눌렀을 때 해당 원본 이미지를 미리 캐싱(precache)하고 완료된 이후에 다음화면으로 보내게 하였다. 이때, 단순히 url만 보내면 안되고 preCache된 이미지의 imageProvider를 갖고있다가 이후화면의.. 2020. 10. 20.
[flutter] bottomNavigationBar위에서 Hero 구현 : Hero와 Navigator의 관계(HeroController Observing) bottomNavigationBar를 사용하고있고 그 안에서 네개의 탭이 각각의 Navigator를 가지고 있다. 그렇게 각각의 Navigator를 부여한 이유는 rootNavigator과 분리해야 rootNavigator에 존재하는 bottomNavigatorBar의 형태를 유지시킬 수 있기 때문이다. 하지만 각 탭에 새로운 Navigator를 '생으로' 적용하면 Navigation의 기능과 관련된 기능들이 사용되지 않을 수 있다. 내가 겪은 예는 바로 Hero이다. Hero는 Navigation 도중 적용되는 기능 중 하나다. 하지만 생으로 만든 Navigator위에서 routing될 때 사용하면 적용되지 않는다. 그에 반해, Navigator.of의 속성안에 rootNavigator: true 를.. 2020. 10. 7.
[flutter] initstate에 Provider 사용하기 : WidgetBinder 전 화면의 이미지를 다음 화면에 가져와 initState에서 Provider로 widget.[데이터]를 공급해야 할 일이 있다. 하지만 생으로 initState에 @override void initState() { // TODO: implement initState super.initState(); Provider.of(context).set(); } 이렇게 사용하면 'package:flutter/src/widgets/framework.dart': Failed assertion: line 4233 pos 12: '!_dirty': is not true. Either the assertion indicates an error in the framework itself, or we should provide.. 2020. 8. 13.
[flutter] /bin/sh: ~~~/flutter/packages/flutter_tools/bin/xcode_backend.sh:Operation not permitted 에러해결 Operation not permitted 에러는 위와같이 전체 디스크 접근 권한에 해당 앱(xcode)을 추가함으로써 해결할 수 있다. 2020. 7. 31.
[flutter] showModalBottomSheet() 테두리 수정 1.문제 showModalBottomSheet에서 테두리를 수정할 때 가장 안쪽의 Container의 테두리를 수정하면 아무 변화도 나타나지 않는다. 2. 해결 바깥에 Container를 한번 더 감싸준 다음 바깥 Container의 color을 기본 modalBottomSheet의 그림자 색깔인 Color(0xFF737373) 으로 설정하면 바뀐 모습을 볼 수 있다. showModalBottomSheet( context: context, builder: (context) { return Container( height: _width, color: Color(0xFF737373), child: Container( decoration: BoxDecoration( color: Colors.white, bor.. 2020. 7. 6.