Flutter35 [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. [Flutter] 플러터 파이어베이스(Firebase)를 통한 구글(Google) 소셜 로그인 설정하기 플러터로 소셜 로그인을 하게 되면서, 파이어베이스(Firebase)를 통한 구글, 애플 소셜 로그인을 구현할 수 있습니다. 구글(Google) 소셜 로그인 Firebase 생성 및 설정 먼저, 파이어베이스를 생성 및 설정으로 들어가서 `Authentication`을 설정해줘야 합니다. `Authentication`에서 하위 탭 `Sign-in-method` 클릭하여 `Google 선택` 만약, Google을 인증 제공업체로 사용하려면 하단 외부 프로젝트의 클라이언트 ID 허용 목록에 추가 부분에 구글 클라우드에서 아래 이미지와 같이 사용자 인증 정보 정보를 넣어주면 됩니다. (선택사항) OAuth2.0 클라이언트 ID에서 계정을 클릭하면 클라이언트 ID와 클라이언트 보안 비밀 키를 확인할 수 있습니다. .. 2022. 12. 24. [Flutter] 플러터 `Rive` 적용하기 `Rive`를 활용하여 배경이 움직이고 블러 처리하여 뉴모피즘 느낌을 줄 수 있습니다. rive 사이트에서 예제를 받을 수 있습니다. Rive - The new standard for interactive graphics Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics for your products, apps, sites, and games. rive.app 아래의 패키지를 설치하여 사용합니다. rive | Flutter Package Rive 2 Flutter Runtime. This package provides runtime fun.. 2022. 12. 23. 이전 1 2 3 4 다음
