Dart/Flutter37 [Flutter] 플러터 GetX에서 Hero 위젯 사용하기 플러터에서 GetX에서 Hero를 사용하려면, 제대로 작동이 안 되는 것을 볼 수 있습니다. 해당 이미지가 Init 시점보다 먼저와 야하기 때문인데요. GetX 패턴을 사용하다 보면 사실상 사용하기가 까다롭다고 볼 수 있습니다. 그래서 GetX에서 사용할 수 있는 방법을 소개합니다. 예시 class ListWidget extends GetView { const ListWidget({super.key}); @override Widget build(BuildContext context) { return Column( children: List.generate( controller.data.length, (index) { return CardWidget(index: index); }, ), ); } } cla.. 2022. 12. 30. [Flutter] 플러터 개발속도 향상을 위한 VSCODE 가이드 라인 설정하기 플러터로 개발하다 보면, 선언형 때문에 코드 위치 및 구조를 파악하기 어려울 때가 있습니다. 물론, 코드량이 많아지기 전에 별도로 클래스로 나눠주면 문제가 없겠지만, 명시적으로 도트라인이 보이면 더 좋을 것입니다. 설정방법 우선, `VSCODE 설정`으로 들어갑니다. `Preview Flutter Ui Guides` 항목을 활성화시켜 주세요. 그리고, 오른쪽 상단에 아이콘 클릭하여 `OpenSetting JSON` 형태로 열어주세요. 위에 2가지 항목을 추가해 주시고, `VSCODE를 완전히 종료`했다가 다시 열어주세요. 저 같은 경우 재부팅하고 바로 적용이 안되고 조금 있다가 적용이 되더라고요. 2022. 12. 26. [Flutter] 플러터 앱 버전 체크(App Version Check) 만들어 사용하기 앱의 버전을 체크하여, 업데이트 모달 및 팝업을 띄우는 형태 거나 별도로 체크용으로 필요한 경우 아래에 예제와 같이 만들어 사용하시면 됩니다. 예제 `lib\app\utils\app_version_check.dart` import 'dart:convert'; import 'dart:io'; import 'dart:math' as math; import 'package:http/http.dart' as http; import 'package:package_info_plus/package_info_plus.dart'; /// 마켓 스토어 타입 enum StoreMarket { GooglePlayStore, ApkPure } /// 앱 버전 체크 /// /// [currentVersion] : 현재 앱 버전 .. 2022. 12. 25. [Flutter] 플러터 `RegExp 정규표현식(정규식)` 전체 모음 개발을 하다 보면, 항상 정규표현식(RegExp) 형태를 사용하게 되는데 매번 검색하는 것도 귀찮기도 하고 정규식하고 친해지지도 않는 것 같아서 최대한 사용할만한 정규표현식 전체를 모음으로 배포합니다. 중간에 틀리거나, 추가할 사항은 알려주시면 주기적으로 업데이트하겠습니다. 예제 `lib/app/utils/regular_expression.dart` /// 정규표현식 class RegularExpression { /// 한글만 형식 검사 /// /// [value] String : 한글 static bool isKorean(String value) { RegExp regExp = RegExp( r'^[가-힣]+$', caseSensitive: true, multiLine: false, ); return .. 2022. 12. 25. [Flutter] 플러터 파이어베이스(Firebase)를 통한 애플(Apple) 소셜 로그인 설정하기 파이어베이스(Firebase)를 활용하면, 구글 로그인을 포함한 애플 로그인도 소셜 로그인을 구현할 수 있습니다. `Authentication`에서 `Sign-in-method 탭`으로 이동하여 하단 애플을 선택하고 사용설정을 진행해 줍니다. 하단에 콜백 URL은 별도로 복사하거나 메모해 주시면 됩니다. 파이어베이스에서 앱 추가에서 IOS 추가하기 `앱 번들 ID`, `App Store ID`, `팀 ID` 추가 [Apple] 애플 로그인 설정하기 (Sign In with Apple) 애플 로그인 설정하기 (Sign In with Apple) 앱 및 웹에서 애플 계정으로 로그인 할 수 있는 기능인 "Sign In with Apple"을 설정해보자. 내 iOS 앱에 애플 로그인 기능을 넣어야 하는 이유 애.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `flutter_flags` 명령줄 도구 추가하기 Flutter 앱의 성능을 개선하려면 `flutter_flags` 명령줄 도구를 사용하여 다양한 성능 관련 플래그를 활성화할 수 있습니다. 이러한 플래그를 사용하면 특정 앱의 요구 사항에 더 잘 맞도록 Flutter 프레임워크 및 Dart 가상 머신의 동작을 미세 조정할 수 있습니다. 명령줄 설명 --dart-define=flutter.inspector.debugDescription=false 앱을 빌드하고 렌더링할 때 성능을 향상시킬 수 있는 위젯에 대한 디버그 설명 생성을 비활성화합니다. --enable-software-rendering=false 하드웨어 가속 렌더링을 비활성화하고 대신 소프트웨어 렌더링을 사용하려면 --enable-software-rendering=false 플래그를 사용할 수 있.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `GPU enableSoftwareRendering` 가속하기 플러터에서 하드웨어 가속을 활성화하려면 `WidgetsFlutterBinding` 객체의 `enableSoftwareRendering` 속성을 false로 설정해야 합니다. 이렇게 하면 Flutter가 `CPU 대신 GPU를 렌더링에 사용`하도록 지시할 것입니다. 아래 예제에서는 `RendererBinding` 개체의 `addPostFrameCallback` 메서드를 사용하여 첫 번째 프레임이 렌더링 된 후 하드웨어 가속을 활성화합니다. 이렇게 하면 하드웨어 가속이 활성화되기 전에 앱이 완전히 초기화됩니다. 하드웨어 가속이 활성화되면 Flutter는 렌더링에 `CPU 대신 GPU를 사용하여 앱의 성능을 향상`할 수 있습니다. 예제 import 'package:flutter/widgets.dart'; vo.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 지연로딩 하기 아래에 예제에서는 `MyLazyLoadedWidget`은 필요할 때까지 `MyHeavyWidget`의 로딩을 지연하는 위젯입니다. 앱이 시작되면 `MyLazyLoadedWidget`은 `MyHeavyWidget`이 `비동기식으로 로드되는 동안 로딩 표시기를 표시`합니다. 무거운 위젯이 로드되면 화면에 표시됩니다. 이렇게 하면 무거운 위젯이 필요할 때까지 로드를 지연시켜 앱의 초기 시작 시간을 개선하고 메모리 사용량을 줄이는 데 도움이 될 수 있습니다. 예제 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildC.. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `AutomaticKeepAliveClientMixin` 위젯 캐싱하기 복잡한 레이아웃과 그래픽이 많이 포함되어 빌드 비용이 많이 드는 위젯의 경우 `AutomaticKeepAliveClientMixin`를 사용하여 `wantKeepAlive` 속성을 `true`로 설정하면 이 위젯의 상태를 캐시하고 화면에 표시되지 않을 때 다시 빌드되는 것을 방지할 수 있습니다. 추가로 탭바에서 탭을 할 때마다 재렌더링 되는 것을 볼 수 있는데, 스크롤 위치를 기억한 화면을 표시하기 위해서 사용할 수도 있습니다. 이렇게 하면 위젯을 다시 빌드해야 하는 횟수를 줄여 앱의 성능을 개선하는 데 도움이 될 수 있습니다. 예제 import 'package:flutter/material.dart'; class MyExpensiveToBuildWidget extends StatefulWidget .. 2022. 12. 24. [Flutter] 플러터 성능향상을 위한 `RepaintBoundary` 위젯 사용하기 플러터에서 작동할 때에 다른 변경되지 않은 위젯까지 재렌더링을 하는 경우가 생길 수 있습니다. 예로 들면, 여러 위젯 안에 하나의 위젯에 데이터만 변경(렌더링)되기만 하면 되는데 그 위젯을 변경하기 위해 관련된 부모, 친구 위젯까지 모두 재렌더링이 발생할 수 있는 것이죠. 플러터로 개발을 하다 보면, const를 붙이게 되면 암묵적으로 렌더링에서 다시 그리지 않습니다. 비슷한 유형이라고 보시면 될 것 같습니다. 언제 사용해야할까? 해당 위젯이 복잡한 레이아웃과 그래픽(애니메이션)등이 포함되어 있어 렌더링 비용이 많이 들것이라고 예상이 된다면, `RepaintBoundary`를 사용하여 렌더링 성능을 최적화할 수 있습니다. `RepaintBoundary`를 사용하게 되면, 수치는 낮지만 일부분의 CPU와 .. 2022. 12. 24. 이전 1 2 3 4 다음
