Foggy day

이번 포스팅에서는 MVVM 패턴에 대해서 알아보겠습니다. MVVM 패턴은 Model, View, ViewModel의 줄임말입니다. 이 패턴을 사용하는 이유는 UI를 그리는 View와 데이터클래스인 Model, 데이터들을 담고 있는 ViewModel을 따로 관리하기 위해서입니다. 따로 관리한다는 것은 의존성을 줄여줌으로써 유지보수의 편의성과 오류의 가능성을 줄여줄 수 있다는 것을 의미합니다. 또한 특정 데이터가 변경됐을 때 UI의 변경도 쉽게 구현할 수 있습니다. 이번 MVVM 패턴 앱에서는 상태관리 라이브러리를 사용하지 않습니다. ChangeNotifier와 ValueListenableBuilder, ValueNotifier, ValueNotifierList(커스텀으로 만든 클래스), AnimatedBu..

Flutter에서 가장 많이 사용하는 위젯 중 하나인 Column 위젯에 대해 알아보겠습니다. Column은 자식 위젯들을 세로로 배치시킬 수 있는 LayoutWidget입니다. 1. 기본 red, blue 컬러의 컨테이너 두개를 Column의 자식 위젯으로 입력했습니다. 아무 특성을 주지 않았기 때문에 Column의 최상단에 자식 위젯들이 순서대로 그려졌습니다. Column( children: [ Container( width: 100, height: 100, color: Colors.red, ), Container( width: 100, height: 100, color: Colors.blue, ), ], ); 2. MainAxisAlignment 이번에는 green 컨테이너를 추가하고, 컨테이너들을..

Container는 Flutter에서 가장 많이 사용하는 위젯 중 하나입니다. 대부분 사이즈와 간격 조절을 위한 layoutWidget으로 많이 사용하는데 이번 포스팅에서는 Container가 가지고 있는 다양한 속성들을 활용해보겠습니다. width, height, margin, padding, constraints 특성은 많이 사용되고 있으니 설명은 생략하겠습니다. 자세히 주목할 부분은 decoration과 foregroundDecoration 특성입니다. 예제에서 decoration 특성에는 그라데이션(gradient)을 넣었고, foregroundDecoration 특성에는 그림자 효과(shadow)를 주었습니다. decoration decoration은 자식 위젯의 뒤에 그려지는 특성입니다. Bo..

이번 포스팅에서는 Flutter에서 사용되는 기본 Dialog에 대해 알아보겠습니다. Dialog의 속성에는 여러가지가 있습니다. 배경색, 배경 터치여부, 키보드가 올라왔을 때 영역/애니메이션 설정 등. 이러한 속성들을 알아보고, 각 속성들이 어떤 역할을 하고 있는지 알아보겠습니다. 대부분의 설명은 예제에 주석으로 추가했지만 Dialog에서 잘 안쓰이는 특성들 몇 가지만 추가적으로 설명하겠습니다. alignment : 다이얼로그의 위치를 설정해줍니다. 예제에서는 bottomCenter로 주었기 때문에 화면 하단에 노출됩니다. insetAnimationDuration, insetAnimationCurve : 화면에 키보드가 올라왔을 때 동작하는 특성들입니다. 키보드가 올라오면서 화면이 줄어들기 때문에 다이..

이번 포스팅에서는 Flutter로 만든 Android 앱을 런처앱으로(기본앱)으로 설정하는 방법을 알아보겠습니다. 요구 조건은 아래와 같습니다. 실행된 앱에서 Recent 버튼 비활성화 상태바(Status bar, 상단)와 네비게이션 바(Navigation bar, 하단) 숨김 처리 실행된 앱에서 Back 버튼 비활성화(Back 버튼으로 앱 종료 못하도록 설정) Android 홈 버튼을 눌렀을 때 해당 앱 실행 첫번째 기능은 Android Native 코드에서 두번째, 세번째 기능은 Flutter 코드에서 네번째 기능은 핸드폰의 설정 앱에서 변경할 수 있습니다. 1. Android Native code MainActivity.kt 먼저 Android의 MainActivity 파일에서 아래 코드를 추가해주..

ListTile을 사용하면 간단한 위젯을 만들 때는 편했지만 디테일한 UI를 구성할 때는 불편해서 잘 사용하지 않았었습니다. 주로 padding문제 때문이었는데, 이 기회에 어떤 특성들이 padding을 갖고 있는지 체크해봤습니다. 1. ListTile은 기본적으로 좌우 패딩이 들어가 있습니다. 그래서 원하는 패딩 값을 넣기 위해서는 contentPadding 특성에 EdgeInsets 형태의 값을 넣어줘야 합니다. 2. 세로 또한 기본 패딩 값이 들어가있는데 변경하려면 minVerticalPadding 특성에 double 값을 넣어주면 됩니다. 3. 그리고 ListTile에는 leading, tile, trailing 3개의 위젯이 들어갑니다. 이 3개의 위젯 사이에도 기본적인 간격이 들어가 있는데 간..

Checkbox Widget은 많이 사용되지만 위젯의 크기와 모양, 컬러를 변경하는 부분에서 헷깔릴 때가 많습니다. 그래서 자주 사용되는 기능들을 사용해서 정리해봤습니다. 특히 설정하기 어려웠었던 부분은 체크박스의 기본 패딩 제거와 사이즈 변경이었습니다. 체크박스는 기본적인 사이즈와 패딩을 가지고 있는데 패딩을 제거하기 위해서는 materialTapTargetSize 특성에 MaterialTapTargetSize.shrinkWrap를 입력하면 됩니다. 그리고 크기를 변경하기 위해서는 Transform.scale 위젯을 사용할 수 있습니다. /// 체크박스의 사이즈조절을 하려면 scale 사용 필요 /// ex) scale 1.2 => 크기 1.2배 Transform.scale( scale: 1.2, ch..

TextFormField Flutter에서 사용자의 입력을 받을 때 TextFormField이나 TextField 위젯을 많이 사용합니다. 이번 포스팅에서는 TextFormField 위젯을 사용해서 validation체크와 에러 문구를 띄워주는 작업을 해보겠습니다. TextFormField 위젯을 사용할 때 불편했던 점은 decoration특성이었습니다. 어떤 특성들을 입력해야 내가 원하는 decoration설정이 되는지 찾아보는 것 부터 많은 시간이 필요했습니다. 아래 예제에서는 4가지의 border 특성을 주었습니다. 1. TextFormField 선택 안 했을 때(enableBorder) 2. TextFormField 선택 했을 때(focusedBorder, 3, 4번이 2번 Border보다 우선순..

이번 포스팅에서는 클래스의 상속, 추상클래스, implements(interface), mixin을 사용하는 방법에 대하여 알아보겠습니다. 1. 상속 Dart는 Java나 Kotlin처럼 extends키워드를 이용해 1개의 클래스만 상속받을 수 있습니다. 이때 상속당하는 클래스가 부모클래스, 상속을 하는 클래스는 자식 클래스라고 합니다. Animal 클래스와 Lion 클래스가 있습니다. Lion 클래스는 extends라는 키워드로 Animal을 상속받고 있습니다. 이때 Animal클래스가 부모 클래스, Lion클래스가 자식 클래스입니다. 자식 클래스는 부모 클래스에 있는 함수와 변수를 사용할 수 있습니다. class Animal { void eat(){} } class Lion extends Animal..

개발에 있어서 객체지향과 클래스의 개념은 매우 중요합니다. 하지만 처음에 개념을 이해하기는 어렵기 때문에 개발을 해 나가면서 차츰 이해도와 숙련도를 높이는 것을 추천합니다. 이번 포스팅에서는 객체지향에 대한 개념을 상세하게 소개하는 것이 아니기 때문에 Dart에서 class를 사용하는 방법을 익히는 것 위주로 다루겠습니다. 1. 객체지향(OOP, Object Oriendted-Programming) 객체지향프로그래밍의 핵심 개념은 모든 데이터를 객체(Object)로 본다는 것입니다. 무슨 말이냐면 String 타입의 변수나, int 타입의 변수 또한 객체라는 것입니다. 다른 예로 우리는 사람인 것과 동시에 동물입니다. 사람이 더 구체적인 개념이므로 String과 같고, 동물이 포괄적인 개념이므로 객체와 ..