Foggy day

PopupMenuButton은 버튼을 클릭했을 때 팝업으로 여러 항목들을 보여줄 수 있는 위젯입니다. 위젯의 사용법이 약간 까다롭고, 디테일한 UI를 수정하는 부분에서 어려움이 있었습니다. 그래서 각각의 특성들을 한 번 자세히 알아보겠습니다. 특성들에 대한 설명은 주석으로 상세히 달아놓았고, 아이템을 클릭할 때 splashColor설정이 안 돼서 Theme위젯을 사용했습니다. Full code import 'package:flutter/material.dart'; class PopupMenuButtonScreen extends StatefulWidget { const PopupMenuButtonScreen({Key? key}) : super(key: key); @override State createS..

Row위젯은 가장 많이 사용하는 위젯 중 하나로 위젯들을 가로로 배치시키고 싶을 때 사용합니다. 처음에는 사용법이 헷갈릴 수도 있지만 몇 개의 특성들만 이해한다면 손쉽게 사용할 수 있습니다. Row는 Column 위젯과 형태가 흡사합니다. 단지 기준 축이 가로라는 것이 다릅니다. 그래서 MainAxisAlignment와 CrossAxisAlignment만 잘 이해해도 수월하게 사용할 수 있습니다. MainAxisAlignment MainAxisAlignment는 가로 축으로 자식 위젯들을 어떻게 배치할지를 결정합니다. MainAxisAlignment에는 6가지 타입이 있습니다. 각 타입별로 자식 위젯들이 어떻게 배치되는지 그림으로 표현해 뒀습니다. Row( mainAxisAlignment: MainAxi..

이번 포스팅에서는 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 컨테이너를 추가하고, 컨테이너들을..

이번 포스팅에서는 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..