그냥 개발자 노트

현재 Flutter에서 많이 사용되는 상태관리 도구중 하나가 Riverpod 입니다.provider에서 출발했지만 provider에 존재하는 단점이 꽤 있어서 이것을 극복하고자 Riverpod가 탄생 하였습니다.Flutter를 개발하시는 분들은 다들 아시겠지만 context의존도가 꽤 높습니다.그리고 위젯별로 독립적이다 보니 A위젯과 B위젯의 데이터 전달하기가 꽤나 까다롭습니다.물론 static 클래스를 활용해서 전달하면 되겠지만 A위젯에서 데이터를 변경해서 B위젯을 업데이트 하는 방식, 혹은 DB를 감지하다 DB가 변경되어 위젯을 업데이트 하는 방식 등에서 Flutter의 기본 상태 관리만으로 업데이트 하기가 상당히 까다롭습니다.그래서 나온것들이 상태관리 개념인데 이전에는 GetX가 많이 쓰였고 현재는..

Firebase Cloud Function 로컬 디버깅의 주의점Firebase Cloud Functions를 Flutter 앱과 함께 로컬에서 테스트하는 환경은 매우 빠른 개발 피드백 루프를 제공합니다.하지만 몇 가지 환경 설정을 빠뜨리면 함수 호출이 실패하거나, 클라우드와 로컬 간 동작 차이가 발생할 수 있습니다.이 글에서는 Functions만 로컬에서 테스트할 때 필수적으로 확인해야 할 설정과 주의점을 정리합니다.1. Firebase Functions + 에뮬레이터 초기화Cloud Functions만 로컬 테스트할 경우에도 Firebase 프로젝트 초기화 시 함께 Firebase Emulators 설정을 추가해 두는 것이 좋습니다.1단계: Firebase 프로젝트 초기화firebase init fun..

Cafe24 쪽 Oauth를 구현해야 할 일이 생겨서 작업하는 도중에 원활히 되지 않아서 작업 내용을 기록합니다. 일단 Cafe24 쇼핑몰을 개설하고 앱을 개별적으로 만들는 작업을 진행중입니다.Flutter를 이용해서 앱을 만들 예정인데 API 가 모두 공개 되어 있어서 비교적 수월합니다.Cafe24 가입 후 개발자 센터도 가입합니다.  Android로 앱을 등록합니다.중복등록이 안되기 떄문에 Android 와 IOS 따로 생성해야 합니다. Redirect URI 등록을 해야 하는데 이 개념이 없어서 고생했습니다.인증코드 요청 후 해당 URI Scheme으로 인증코드가 날라옵니다.모든 앱은 고유 패키지명을 가지고 있기 때문에 패키지명://경로 와 같이 설정 합니다.예를들면 패키지명이 com.testapp..

AnimatedOpacity 투명도를 조절하고 싶다면 AnimatedOpacity를 사용 합니다. Flutter 기본 프로젝트에서 텍스트 부분만 Opacity를 적용해 봤습니다. AnimatedOpacity( duration: const Duration(milliseconds: 300), opacity: _counter%2==0?0.2:1, child: const Text( 'You have pushed the button this many times:', ), ), duration은 전환 시간으로 300 milliseconds 즉 0.3초 입니다. opacity는 투명도입니다. 여기서는 0~1 사이의 실수. 그래서 버튼을 누를떄마다 투명해졌다 진해졌다 전환하게 됩니다. 테스트 해보면 코드대로 잘 동작하..

앱을 만들다 보면 갤러리(사진첩)에서 이미지를 선택해야 할 일이 생깁니다. 이 경우를 알아보겠습니다. 우선 필요한 패키지는 image_picker 입니다. https://pub.dev/packages/image_picker image_picker | Flutter Package Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera. pub.dev 선택하는 방법 자체는 아주 쉽고 간단합니다. static Future PickImage() async { return await ImagePicker().pickImage(source: ImageSource.g..

파파고 번역 Flutter 에서 파파고 번역을 사용하는 방법 입니다. https://www.ncloud.com/product/aiService/papagoTranslation NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 일단 파파고 API 등록을 합니다. 이것은 다른곳에도 많이 알려져 있기 때문에 간략히 넘어가겠습니다. Flutter에서는 기본적으로 http 에관한것이 없기 때문에 패키지 추가 해야 합니다. pubspec.yaml을 열고 http를 추가 해 줍니다. Flutte..

화면 하단부에 임시로 잠시 뜨는 PC에서 팝업같은 처리를 하는 ModalBottomSheet를 알아 보겠습니다. flutter 기본 앱을 수정하여 floatingActionButton을 누르면 ModalBottomSheet가 뜨도록 하겠습니다. floatingActionButton은 화면 중앙 하단에 있는 +버튼 입니다. 이 버튼을 누르면 ModalBottomSheet가 뜨고 거기서 텍스트를 입력받으면 기본 화면의 "Sample Text"자리에 뜨도록 수정되는 간단한 구조 입니다. 일단 ModalBottomSheet에 뜰 위젯을 보겠습니다. import 'package:flutter/material.dart'; class BottomDialog extends StatefulWidget { final Fu..

Flutter에서 폰트나 이미지 등을 사용하는 방법을 확인 해 보겠습니다. 일단 적당한 폰트를 받아서 assets/fonts 폴더에 넣어줍니다. 전 무료폰트인 구글의 NotoSerif를 받아서 넣었습니다. 기본폰트가 고딕계열이라 Serif계열을 쓰면 폰트가 바뀐것을 쉽게 알 수 있습니다. 이제 새로운 Flutter 프로젝트를 생성합니다. 여기서 화면 중앙에 문구표시되는 부분이 있는데 약간만 수정합니다. children: [ Container( width: 300, child: const Text( 'You have pushed the button this many times:', style: TextStyle( fontSize: 30, ), ), ), Text( '$_counter', style: The..

Flutter 에는 다양한 위젯들이 있습니다. 이중에서 SingleChildScrollView, ListView를 간략히 알아 보겠습니다. https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html SingleChildScrollView class - widgets library - Dart API A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you ne..

표시된 부분과 같이 버튼이 다수 존재 하는데 이것이 상황에 따라 달라질 경우 예를들면 A라는 사람에게는 2개, B라는 사람에게는 3개가 표시 되어야 할 상황이라면 위젯을 그냥 박아버리면 문제가 될 수 있습니다. 이때 Spread Operator 를 활용 할 수 있습니다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { var TextArray = ['Hello', 'World', 'ABCD']; void ButtonClick() { print('Button Click'); } // This widget is the root of your applicatio..