승상의 코딩 블로그

TextField 누르면 키보드가 올라온다.그러나 키보드를 내릴려면 완료버튼을 눌러야 한다.하지만 우리가 일반적으로 본 앱에서는 어플의 배경을 누르면 키보드가 내려가서 숨겨졌다.  화면을 눌렀을 때, 키보드가 내려가도록 구현해보자....GestureDetector( // Scaffold(화면)에서 버튼을 눌렀음을 알 수 있도록 GestureDetector 로 감싼다.     onTap: () {         FocusManager.instance.primaryFocus?.unfocus(); // 키보드를 닫는 로직      },      child:... 사용자의 제스처를 인식하기 위해 GestureDetector 를 사용한다.화면을 눌렀을 때 동작해야하기 때문에 onTap 콜백에다가 키보드를 닫는 로..

혼자 공부하거나 개발할려고 할 때, 색상과 스타일을 관리하기 힘들다.체계적으로 관리하고 시작할려고 하니, 시작할 수가 없다.디자이너도 없고... 디자인을 모른다. 2025.01.11 - [Flutter (플러터)] - [Flutter] 색상, 스타일 등 체계적으로 관리하기 [Flutter] 색상, 스타일 등 체계적으로 관리하기시중의 플러터의 기초 책들은 직접적으로 코드안에다가 색상이나, 스타일 등을 설정한다.설명해야하는 범위를 줄이고 말하고자 하는 것에 집중하기 위해서 일 것이다. 하지만 앱의 페이지 수seungsang.tistory.com이 포스팅에서 쓴 내용을 적용하기 위한 색상과 스타일을 찾는 방법을 소개한다. 1. 구글에 원하는 앱 종류를 쓰고 Figma 를 붙여준다.2. 원하는 디자인을 선택하여..

시중의 플러터의 기초 책들은 직접적으로 코드안에다가 색상이나, 스타일 등을 설정한다.설명해야하는 범위를 줄이고 말하고자 하는 것에 집중하기 위해서 일 것이다. 하지만 앱의 페이지 수가 많아지거나 복잡해질수록 매번 사용하는 위젯에다가 직접적으로 색상과 스타일 등을 선언하는 것은 개발하거나 유지보수 측면에서 매우 불리하다. 디자이너가 있다면 디자인 시스템이 있을 것이고, 피그마 등으로 디자인이 만들어져 있을 것이다.UI 개발 시에 미리 계속 활용될 부분들을 만들어 놓으면, UI 디자인보다 기능에 조금 더 집중해서 만들 수 있다. (theme 이나 size 같은 파일도 만들지만, 현재 개발중엔 프로젝트엔 필요없어서 만들지 않았다.)프로젝트의 크기 등에 따라 만들어지는 파일들이 달라지지만Color, TextSt..

앱을 사용하면 항목같은 것을 새로고침하기 위해서 화면을 내려서 새로고침하는 방법을 쓰는 경우를 많이 봤다. 플러터에도 항목을 내리면 새로고침되고, 새로고침 되고 있다는 것을 상대방에게 알려주는 위젯이 있다.RefreshIndicator 를 사용해보자. RefreshIndicaotr는 ListView 같이 스크롤 할 수 있는 위젯과 사용하면 된다.사용형태RefreshIndicator(   onRefresh: onRefresh,  child: ListView ) onRefresh 는 Refresh 할 때 실행할 함수를 정의한다. Future 를 반환한다.추가속성추가속성으로 edgeOffset, displacement 도 있다. 이 두 가지 속성으로 Indicator 의 위치를 조정할 수 있다.(Indicat..

단순히 버튼을 눌러서 처리하는 것보다 위젯을 슬라이드 하는 디자인은 다양한 곳에서 찾아볼 수 있다.플러터에는 이러한 기능을 쉽게 사용할 수 있는 flutter_slidable 이라는 패키지가 있다.  https://pub.dev/packages/flutter_slidable flutter_slidable | Flutter packageA Flutter implementation of slidable list item with directional slide actions that can be dismissed.pub.dev설치pubspec.yaml 에 flutter_slidable 을 추가한다.dependencies:  flutter_slidable:^3.1.2  예시 코드 단순히 Sliable 위젯으로..

extension 을 활용하면 기존 클래스나 타입에 새로운 기능을 추가할 수 있다.기존의 클래스를 수정하지 않아도 된다. int.parse("3") 은 flutter(dart) 에서 문자열을 정수에서 변경하는 방법이다.하지만 문자열에서 숫자로 더 간결하게 변경할 순 없을까?예를 들어, "3".toInt() 와 같이 말이다. 하지만 "3" 은 String 타입이고, String 클래스에는 정수로 변경하는 함수가 없다.이렇게, 기존 클래스에다가 기능이 추가되었으면 할 때 extension 을 활용하면 좋다. 사용예시 extension 의 이름(위에서 StringExtension)은 생략해도 된다.그러나 extension 에 이름이 있어야 라이브러리나 API 를 사용시 생기는 충돌을 해결할 수 있다.(다른 e..

왜 불변 객체을 써라고 하는 것일까?* 불변 객체만 쓰라는 것은 아니다. 대부분의 경우에 장점이 많기 때문이다* 대부분의 경우에서 불변 객체의 단점을 장점이 상쇄시킨다.불변 객체를 사용하면 외부에서 의도하지 않은 수정으로부터 객체를 보호할 수 있다.코드는 한 사람만이 개발하는 것이 아니다.즉, 내가 구현한 객체가 의도치 않게 외부에서 수정될 수 있다.데이터와 로직의 흐름을 파악하기 쉽다.데이터가 변경이 일어날 경우, 이를 추적하면 코드를 파악하는 것은 쉽지 않다.데이터가 불변이 아니라면, 데이터가 변경이 되지 않았음을 계속해서 파악해야한다.자신이 코드를 작성할 경우에는 로직을 정확히 파악하고 모든것을 컨트롤 할 수 있다고 생각할 수 있다.(내가 처음에 이랬다)그러나 개발하는 시스템이 복잡해지고 시간이 지..

복사에는 얕은 복사(shallow copy)와 깊은 복사(deep copy)가 있다.얕은 복사얕은 복사는 객체의 참조값만 복사한다.(원본 객체와 동일한 메모리 주소값을 참조하는것이다.)즉, 데이터를 "공유"하는 것이다.  위 코드는 얕은 복사에 대한 예시이다.데이터를 공유하기 떄문에 x 객체의 값을 변경하였는데, y 객체의 값도 변경되었다. 얕은 복사는 메모리 데이터가 공유되기 때문에 메모리를 절약할 수 있다.하지만, 일반적인 프로그램에서는 메모리 부족에 대한 문제를 겪기 힘들것이다.복잡한 프로그램이라면 데이터의 독립성을 보장하여 사이드 이펙트(버그)가 생기지 않도록 하는것이 더 효과적이다.깊은 복사깊은 복사를 사용하면 객체의 값 자체를 복사하여 독립적인 객체를 만들 수 있다.깊은 복사는 객체를 다시 ..

몇 개의 간단한 페이지 있다면 네비게이션(화면이동)을 정리할 필요가 없습니다.그러나 앱의 다양한 곳에서 같은 페이지에 접근해야 한다면, 페이지의 이름을 정의하고 정리하는 것이 효율적일 것입니다.💡 DeepLink 의 문제(ex. 웹 링크를 눌러 어플로 라우팅) 로 인해, Named Route 를 사용하는 것을 추천하지 않는다고 합니다. 그러나 단순 앱내서 앱내로의 이동에 사용하는 경우는 유용합니다. https://docs.flutter.dev/cookbook/navigation/named-routes  Navigate with named routesHow to implement named routes for navigating between screens.docs.flutter.dev구현HOME 과 S..

어떤 폰트를 사용하느냐에 따라 어플의 가독성이 달라진다.폰트는 감정이나 분위기를 전달하는데 사용될 수 있다.더 나아가 상품이나 브랜드의 아이덴티니를 형성시켜주는 요소로써 활용할 수 있다.  플러터에 폰트를 추가해서 적용해보자.폰트 다운 및 추가 방법1. 아래 링크(구글 폰트)에서 폰트를 다운 받습니다.https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 저는 Noto Sans 폰트를 다운 받았습니다. 2. 플러터 프로젝트에 assets/fonts 를 만든 뒤, 다운받은 폰트중에 사용할 폰트(.ttf) 를 복사합..