그냥 개발자 노트

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

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..

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..

?? 좌측이 null이라면 우측을 리턴합니다. ??= 변수가 null 일 경우에만 변수에 우측값을 할당 합니다. 초기 할당에서는 null이기 때문에 3이 할당 되었지만 10을 할당 하려 했을 경우 null이 아니기 때문에 할당되지 않았습니다. ... Spread Operator 이라고 불리며 컬렉션의 값을 쪼개버립니다. ...을 썻을경우 list2 에는 값이 쪼개져서 할당 되었고 쓰지 않은 list3에는 리스트 내부에 리스트가 또 있는것을 확인 하였습니다 ...?으로 널체크 가능 합니다.

StatelessWidget을 상속받아 커스텀 위젯을 만들 수 있습니다. 당연히 여러 방면에서 쓰일수 있고 전체 코드양을 줄이며 재활용 하기 편하기 떄문에 다른 언어에서도 많이 사용 하는 방법 입니다. https://aostols.tistory.com/16?category=564017 Flutter - StatelessWidget / StatefulWidget StatelessWidget 간략히 설명하자면 한번 그려지고 나면 다시 그려지지 않습니다. 예를 들어서 단순히 이미지 + 버튼 링크만 있는 상황이라면 언제나 링크만 동작하면 되기 때문에 이럴때 StatelessWidge aostols.tistory.com 기존 코드를 약간 변형해서 사용 해 봅시다. import 'package:flutter/mat..