Foggy day

이번 포스팅에서는 AppBar의 사용법을 알아보겠습니다. AppBar는 대부분 Scaffold위젯과 함께 사용됩니다. 새로운 페이지로 이동할 때 뒤로가기 버튼과 페이지 이름, 필요하다면 추가적인 버튼들을 추가해서 사용합니다. 앱바에는 이 외에도 몇 가지 특성들이 더 있습니다. 그래서 자주 사용하는 특성들과 자주 사용하지 않는 특성들을 함께 살펴보겠습니다. 우선적으로 알아야 할 것은 leading, title, action 위젯들입니다. leading은 앱바의 왼쪽, title은 앱바의 가운데, action은 앱바의 오른쪽에 위치하는 위젯들입니다. 이때 leading위젯을 선언하지 않거나 null을 입력하면 뒤로가기 버튼이 기본적으로 생성되는데 automaticallyImplyLeading특성을 사용하면 ..

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과 같고, 동물이 포괄적인 개념이므로 객체와 ..

알고 있으면 좋은 문법들에 대해 예제를 추가했습니다. 이중에서 spreadOperator는 특히 많이 사용되고, where도 필요에 따라서 많이 사용할 수도 있습니다. 어떠한 형태로 사용하는지 익혀두면 좋습니다. import 'dart:math'; // The imported package 'collection' isn't a dependency of the importing package. // 나올 경우 yaml -> dependencies -> collection: any 추가 import 'package:collection/collection.dart'; class Advanced { Advanced() { spreadOperator(); functionalProgramming(); whereSy..