반응형 Dart/Flutter7 [crop_your_image] 이미지 크롭 라이브러리 커스텀하기 이미지를 크롭할 일이 생겨서 직접 개발하기엔 시간이 없어 디자인을 만족하는 라이브러리가 필요했다. https://pub.dev/packages/crop_your_image crop_your_image | Flutter Package crop_your_image helps your app to embed Widgets for cropping images. pub.dev 몇몇 후보중에 위 라이브러리를 선택했다. Controller가 있는 것이 가장 용이했다. 내가 구현하고자 하는 조건은 아래와 같다. - 이미지는 확대,축소 및 이동이 가능하다. - Crop되는 영역을 화면 중앙에 화면 크기를 고려하여 일정한 크기와 비율료 고정된다. - Crop 영역은 원으로 표시된다. (이미지를 CircleAvatar에 넣.. 2023. 8. 11. [Flutter] SliverPersistentHeaderDelegate AutoCalculate Height CustomScrollView를 사용하다 보면 SliverPersistentHeader를 사용하여 뷰포트 상단에 닿으면 상단에 고정(Pin) 되는 위젯을 구현해야 할 때가 생긴다. 하지만, 이러한 경우 SliverPersistentHeaderDelegate에 minExtent와 maxExtent를 수동적으로 지정해줘야 한다. 물론, layout 관련 에러가 뜨지 않게끔 맞춰서 할 수 있지만 꽤나 피곤하고 이게 맞나?라는 생각을 지울 순 없었다. 그래서 찾아봤다. 우선 Chat GPT 3에게 도움을 요청했지만 실효성 있는 결과물은 도출해 내지 못했다. (내가 질문을 못하는 걸 지도..?) 그래서 결국 전통의 방식(?)인 구글 검색을 했다. StackOverflow도 방문하고 Github도 방문하고 결국 찾.. 2023. 6. 14. [Flutter][KakaoLogin] 플러터 카카오 로그인 구현 (1. 설정) 1. 플러터 프로젝트 생성 2. 카카오 디벨로퍼스에서 어플리케이션 추가하기 3. 의존성 설정 추가하기 프로젝트 루트 디렉토리에서 터미널을 켜고 아래 명령어를 입력한다. flutter pub add kakao_flutter_sdk_user pubspec.yaml 4. 플랫폼 정보 등록하기 -네이티브 앱 키를 복사한다. 4.1 안드로이드 - 4.1.1 패키지명 -- android/app/src/main/AndroidManifest.xml - 4.1.2 키 해시 (mac)터미널에서 실행시키면 된다. (window)OpenSSL 사용 (위 키해시 링크 참고) -- mac[debug] keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.ke.. 2023. 4. 23. [Flutter] Deep Link 어플리케이션이 고도화 되기 위해서는 딥링크가 필수적이라고 판단한다. 때문에 네비게이션 혹은 라우터 구성과 동시에 진행하려한다. 플러터 딥링크를 검색하면(당연히 구글) 아래와 같은 공식 문서가 나온다. https://docs.flutter.dev/development/ui/navigation/deep-linking Deep linking Navigate to routes when the app receives a new URL docs.flutter.dev 가장 처음에는 공식문서의 안내를 따라가는 것을 권장한다.(거의 당연시함) - Android 설정 in AndroidManifest.xml - activity 태그 내의 맨 하단에 작성해준다. - customScheme 와 myHost.name.com은 .. 2022. 11. 23. [Flutter] apply? copyWith? in TextTheme 원문 https://api.flutter.dev/flutter/material/TextTheme-class.html apply 와 copyWith를 이전 언어에서도 잘 사용해보지 않아서 차이점을 몰랐다. 이번에 구글에서 제공하는 코드랩을 진행하면서 마주하게되었다. 코드를 보고나니 정리할 필요가 있다고 생각되어 작성한다. 예시 코드는 아래와 같다. 공식 문서의 Methods에서 확인해보면 apply({String? fontFamily, double fontSizeFactor = 1.0, double fontSizeDelta = 0.0, Color? displayColor, Color? bodyColor, TextDecoration? decoration, Color? decorationColor, TextD.. 2022. 11. 18. [Flutter] Widget에 Border 추가하기 React 혹은 RN에서 넘어왔기 때문에 각 객체에 border 속성이 있는 것은 당연한 개념이였다. 하지만 이게 뭐람 Flutter의 Widget에는 style이 없는 것도 있었다. 종종 decoration을 통해 여러 속성을 설정 할 수 있는 Widget이 있었지만 모든 Widget이 border를 설정할 수 있는 옵션은 없었다. 다행히도 구글에서 손쉽게 그 방법을 찾을 수 있었다. 내가 찾은 글은 아래 링크와 같다. https://stackoverflow.com/questions/47423297/how-can-i-add-a-border-to-a-widget-in-flutter How can I add a border to a widget in Flutter? I'm using Flutter and .. 2022. 11. 17. [Flutter] StatefulWidget 알아보기 상태 변화를 감지하는 기준이 되는 변수를 사용하여 상태 변화에 따라 어떠한 액션이나 형태를 바꿀 수 있는 위젯이다. 상태 변화는 State 내에서 setState를 통해 변경하고 이를 자동으로 감지하여 다시 그려준다. 공식 문서를 (번역하는 과정 중에 있다.) 읽어보는 것이 가장 빠르다. 원문 번역본 (w. papago) https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html StatefulWidget class - widgets library - Dart API A widget that has mutable state. State is information that (1) can be read synchronously when the wid.. 2022. 11. 16. 이전 1 다음 반응형
