Front-End/Flutter

[Flutter] 구글 플레이 스토어 배포 과정

Flutter 앱 어플을 구글 플레이 스토어 배포 과정을 밟아보자.. 다음과 같은 두 단계를 따라준다. 안드로이드 어플을 abb로 빌드 구글 플레이 콘솔에 프로젝트 올리기 참고 https://wp.swing2app.co.kr/knowledgebase/playstore-apprelease/ https://samgupsal.tistory.com/35 https://velog.io/@adbr/2-3.-Google-play-store에-앱-출시 https://velog.io/@anna_developer/열심히-만든-어플을-구글-플레이-스토어에-배포-해-보자 안드로이드 어플을 abb로 빌드 먼저 안드로이드 어플을 배포할 수 있는 형태로 빌드 안드로이드 스튜디오 메뉴에서 Build → Flutter → Build ..

[Flutter] 유용한 패키지

photo_view https://pub.dev/packages/photo_view Pinch 제스쳐라고 해서 손가락 두개 이용해서 사진을 줌인 기본적인 갤러리, 캐러셀 UI도 쉽게 쓸 수 있게 제공 simple_animations https://pub.dev/packages/simple_animations (예시) https://github.com/felixblaschke/simple_animations/blob/main/example/example.md#stateless-animation 플러터에서 기본 기능만으로 애니메이션을 만들려면 대부분 StatefulWidget, Animation, Tween, Controller가 필요 이거 다 해결할 수 있는 패키지 flutter_launcher_icons..

[Flutter] 반응형

앱을 반응형으로 고려하지 않고 만들면 폰이 아니라 아이패드나 다양한 기기에서 볼때 끔찍한 상황이 발생한다. 그래서 큰 화면에서는 다른 레이아웃을 보여주고 싶다면 화면 사이즈에 따른 반응형 레이아웃을 만들면 된다. 💡 현재 기기의 스크린사이즈를 출력하고 싶으면 MediaQuery.of(context).size.width; //폭 (LP단위) MediaQuery.of(context).size.height; //높이 (LP단위) MediaQuery.of(context).padding.top; //기기의 상단바 부분 높이 (LP단위) MediaQuery.of(context).devicePixelRatio; //이 기기는 1LP에 픽셀이 몇개 들어있는지 MediaQuery.of(context).highContra..

[Flutter] 주기적인 알림 띄우기

앱에서 주기적으로 알림을 주면 앱의 월간 활성 사용자를 늘릴 수 있다. notifications.show() 말고 notifications.zonedSchedule()로 주기를 적용해 보자 import 'package:timezone/data/latest_all.dart' as tz; import 'package:timezone/timezone.dart' as tz; 특정 시간에 알림 띄우는 법 // notification.dart showNotification2() async { tz.initializeTimeZones(); var androidDetails = const AndroidNotificationDetails( '유니크한 알림 ID', '알림종류 설명', priority: Priority.h..

[Flutter] Local Notification

notification 종류는 2개가 있다. 서버에서 보내는 push notification / 앱 자체에서 실행하는 local notification 패키지 설치가 필요 flutter_local_notifications: ^9.1.5 android/app/src/main/res/drawable 폴더에 알림을 띄울 아이콘용 이미지를 하나 넣으면 된다 주의사항은 알림용 아이콘은 흰색 아웃라인만 있는 .png만 허용된다 만약 불가능한 이미지를 넣으면 이렇게 보인다 아이폰은 필요없다 그냥 앱 로고 그대로 쓰기 때문 iOS 셋팅 ios/Runner/AppDelegate.swift 파일 if #available(iOS 10.0, *) { UNUserNotificationCenter.current().delegat..

[Flutter] GridView, CustomScrollView

GridView로 만드는 격자 레이아웃 GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2 ), itemCount: list자료.length, itemBuilder: (c, i) { return Container(color : Colors.grey); } ), ListView와 똑같이 자동으로 스크롤바가 생기는 GridView grid가 몇개 생성될지 미리 알고 있으면 GridView.count 쓰고 grid가 몇개 생성될지 아직 모르겠으면 GridView.builder 쓰면 된다 ListView, GridView를 쓰는데 상단엔 다른 레이아웃이 필요해서 Column 쓰면 되는데 그럼 Lis..

[Flutter] MultiProvider

store는 여러개 만들어도 상관없다 state가 100개면 하나의 class에 보관하기는 힘들다 관련있는 staet들을 묶어서 각각 별개의 store로 만들면 나중에 편리하다 class Store1 extends ChangeNotifier { var name = 'john kim'; } class Store2 extends ChangeNotifier { var follower = 0; follower 변경함수들~~ } store가 많은 경우 store 등록하는 법 // provider가 하나일때 // runApp(ChangeNotifierProvider( // create: (c)=>Store1(), // child: MaterialApp( // theme: style.theme, // home: My..

[Flutter] Provider

Flutter에서 전역 상태 관리를 하거나 위젯간에 상태를 공유하기 위해 사용되는 Provider를 알아보자 provider | Flutter Package Provider란 만약에 부모 커스텀 위젯에 있던 state를 자식 커스텀 위젯으로 보내고 싶으면 3-step으로 보내야 한다. 하지만 부모 → 자식이 아니라 부모 → 자식 → 손자 위젯으로 보내고 싶으면 어떻게 할까? 2번 보내면 된다 하지만 상태를 표시하기 위해 불필요한 위젯들이 re-build 되면서 성능 이슈가 발생할 수 있고 커스텀 위젯이 많아지면 많아질 수록 끔찍해진다 Provider는 이 문제를 해결하기 위해 등장했으며, 이렇게 동일한 상태(데이터)를 전역적으로 다른 위젯들과 공유할 때 사용한다 전송 없이 모든 위젯이 state를 직접 ..

[Flutter] Shared preferences

Shared Preferences 앱을 껐다가 켜면 state는 초기화된다. 그래서 state 안에 있던 데이터를 어딘가 저장해 두고 싶으면 서버로 보내서 DB에 저장을 하든가 아니면 shared preferences라는 로컬 공간에 저장하면 된다. 이는 웹에서 로컬 스토리지처럼 앱 데이터 삭제를 누르지 않는 이상 영구적으로 남아있다. shared_preferences 설치 shared_preferences: ^2.0.11 import 'package:shared_preferences/shared_preferences.dart'; import 'dart:convert'; // 유용한 함수가 들어있는 기본 패키지 shared preferences에 데이터 저장하는 법 saveData(){ var stora..

[Flutter] GestureDetector

GestureDetector 유저가 위젯을 어떻게 만지는지 감지할 수 있다 onTap: (){ 한 번 누를시 실행할 코드 } onDoubleTap: (){ 더블탭시 실행할 코드 } onLongPress: (){ 길게누를시 실행할 코드 } onScaleStart: (){ 줌인시 실행할 코드 } onHorizontalDragStart: (){ 수평으로 드래그시 실행할 코드 } 등등 Navigator.push(context, PageRouteBuilder( pageBuilder: (c, a1, a2) => Upload(), transitionsBuilder: (c, a1, a2, child) => FadeTransition(opacity: a1, child: child), transitionDuration: ..