JIN's DEV Life

https://devmuaz.medium.com/flutter-clean-architecture-series-part-1-d2d4c2e75c47 Flutter Clean Architecture Series — Part 1 Sounds awesome? well, wait till we finish the app 😎! devmuaz.medium.com 플러터 패턴을 너무 무작위로 하기보다 좋은 구조로 잡고 코딩을 하는게 좋을 거 같다 생각해서 좋은 글이 있는 것 같아 번역하면서 정리해보려 합니다.(영어 잼민이ㅜ) 기본적인 프로젝트 생성 counter_app |-- android // 컴파일된 android앱 |-- ios // 컴파일된 ios앱 |-- lib // 99퍼의 시간을 할애하는 장소 |-- mai..

Dart에서 null 인식 연산자로 유용하게 사용할 수 있습니다. NullAwareOperator(null 인식연산자) ?? 이렇게 물음표를 2번 붙여써서 사용할 수 있습니다. margin: EdgeInsets.all(myMarginAsDouble ?? 30.0) margin: EdgeInsets.all(myMarginAsDouble ?? 30.0) myMarginAsDouble이 null이 아니면 적용 null이면 10.0 적용.

Stateless위젯 Stateless위젯에서는 변경하고 싶을 때마다 그 위젯을 파괴!하고 새로운 위젯으로 만들어야 합니다. stateless위젯에서 생명주기는 간단합니다. class Screen1 extends StatelessWidget{ @override Widget build( BuildContext context ){ return null; } } 보여주기만 하는 build()에서 화면에 표시할 모양이나 위젯을 생성하는 것입니다. 사실 상태는 있지만 불변성(immuteable)을 가지는 위젯이라 변경할 수 없습니다! Stateful위젯 Stateful한 위젯에서는 본격적으로 다양한 생명주기 메서드가 등장합니다. void initState(){ } Widget build(BuildContext c..

앱에서 단일 스크린(페이지) 앱은 거의? 없을 거라 생각합니다. UX/UI를 생각해서 개발하면 다양한 페이지가 나오는데 이런 멀티 스크린을 어떻게 처리할 지 정리해보겠습니다. 순서 1. 두 개의 경로 만들기 class FirstRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('First Route'), ), body: Center( child: ElevatedButton( child: Text('Open route'), onPressed: () { // Navigate to second route when tapped. }, ), )..

Dart에서 특이한 부분은 짚고 넘어가려고 합니다. 말이 이해하는 데 어려운 부분이 있었습니다. "첫번째 순서 객체로서의 함수?!" 말이 너무 어렵다..... "function은 첫 번째 클래스 object이다" 이 말은 function은 다른 인자처럼 전달될 수 있고! value나 variable, constant 등으로 설정될 수 있다는 뜻이다. --> 문서에서 나온 문장을 해석해봤습니다. 뭔가 함수를 인자처럼 보낼 수 있다고 하는 것 같습니다. 이럴 땐 코드로 예시를 보고 이해하는 게 훨씬 효율적일 거 같다고 생각합니다. 백문이 불여일타 void main(){ // add 함수 int add( int num1, int num2 ){ return num1 + num2; } // multiply 함수 ..

enum 타입 혼자 문서화를 잘하는 개발 팀이라면? 모르겠지만! 개발을 하면서 제품의 특정 타입들을 ( male : 1, female : 2) 숫자로 표기하는 것은 유지 보수 측면에서 혼란이 올 수 있습니다. 특히! 다수의 사람들 아니 내가 짠 코드지만 6개월 있다 다시 내 코드를 보면 "이 숫자 2가 어떤 분기 처리를 하려고 2라고 표현한 거지?" 이런 상황에 놓일 수 있습니다. Dart에서 enum 을 이용해 열거형을 만들어 타입을 명확히 해보겠습니다! enum CarType { SUV , SPORTS , COMPACT } // 안에는 타입들을 정의 간단합니다. enum은 클래스 안에서 정의할 수 없고 class 밖에서 정의하거나 타입들이 상당히 많아지면 따로 파일로 분리해서 리소스를 관리하는 게 유..

flutter에서 제스처를 감지하기 위해 onPressed onTab을 직접 위젯에 넣는 대신에 GestureDetector 위젯을 이용해서 훨씬 더 많은 범위의 위젯을 감지할 수 있습니다. ex) 길게 터치 (GestureTapCallback) , 끌기 (GestureDragStartCallback / GestureDragEndCallback) , 강제누르기 (GestureForcePressPeakCallback) 등등 문서를 참조. 수많은 액션 클래스들이 정의되어 있습니다! 여기 GestureDetector class - widgets library - Dart API A widget that detects gestures. Attempts to recognize gestures that corres..

flutter에서 이미지 파일 가져오는 방법을 알아봅시다! 하드코딩 해서 값을 픽셀 값으로 지정할 수 있지만 가로 모드로 변환하거나 디바이스의 사이즈마다 다를 땐 이미지로 인해 UI가 깨질 수도 잇습니다! Expanded class Expanded calss를 이용할 수 있습니다. ( 참고 : api.flutter.dev/flutter/widgets/Expanded-class.html ) 즉, Row, Column 또는 Flex 위젯의 child 확장해서 child가 사용 가능한 공간을 채울 수 있도록 하는 위젯으로 확장 위젯을 이용하며 반응형처럼 만들 수 있습니다. tip) 갑자기 생각 난 tip. window 경우, Ctrl + Shift를 누르면 전구 표시가 나오는 데, 클릭해서 레이아웃을 나눌 R..

안드로이드 스튜디오에서 생성된 플러터 프로젝트를 보면 pubspec.yaml파일이 생성됩니다. yaml파일은 설정파일로 .yaml확장아로 나옵니다. 보통 xml형식으로 의존성을 추가하는데 xml이나 json형식보다 사람이 저장하고 읽고 쓰기 쉬운 형식으로 나온 약속입니다. node.js의 package.json같은 패키지들의 의존성 관리 및 프로젝트를 정의하는(프로젝트 이름, 버전, 개발 환경등을 기술하는) 역할을 합니다. name: i_am_rich description: A new Flutter application. # The following line prevents the package from being accidentally published to # pub.dev using `pub pub..