인문주의 사피엔스

Flutter에서 AlertDialog에 GridView를 포함할 때 예상과 다른 결과를 발견하게 됩니다. 그 원인을 분석하고 해결 방법을 살펴보겠습니다. 1. GridView in AlertDialog 다음은 AlertDialog의 content에 GridView를 입력하는 소스코드입니다. 그런데 이 코드를 실행하면 화면에 AlertDialog가 표시되지 않습니다. 대신 디버그 창에 아래와 같은 오류 메시지가 출력됩니다. Flutter 문서(https://api.flutter.dev/flutter/material/AlertDialog-class.html)에서 오류의 원인을 유추할 수 있습니다. Flutter 문서는 AlertDialog에 대해 다음과 같이 설명합니다. However, be aware t..

다음 그림은 임의의 너비를 갖는 두 개의 위젯을 아주 단순하게 나타낸 것입니다. ====== === 이 위젯들을 다음처럼 가로축 방향으로 가장 큰 너비에 맞춰 정렬하고, 세로축 방향으로 위아래 빈 공간 없이 배치하려면 어떻게 해야 할까요? ====== ====== 1. Column Column은 다수의 위젯을 세로축 방향으로 배치할 때 사용하는 위젯입니다. 아래 그림은 Column을 이용해 빨간 위젯과 노란 위젯을 세로축 방향으로 배치한 것입니다. 검은 영역은 Column의 빈 공간에 해당됩니다. 다음은 위 그림의 소스코드입니다. 여기서 노란 위젯이 가로축 방향으로 가운데 정렬되고, 검은색의 Column 영역이 세로축 방향의 빈 공간을 꽉 채우는 이유는 Column의 기본값이 다음과 같이 설정되어있기 때..

Flutter는 애니메이션의 구현을 위한 다양한 도구를 제공합니다. 종류가 다양한 만큼 각 도구의 특징을 이해해야 용도와 목적에 맞는 도구를 제대로 선택할 수 있습니다. 따라서 애니메이션을 종합적으로 이해하고 전체 그림을 파악하는 것이 중요합니다. 하나의 애니메이션을 다양한 방법으로 구현해보면 다양한 애니메이션 구현 방법 간의 차이를 명확하게 이해할 수 있습니다. 예제 앱 아래 그림은 예제 앱의 화면입니다. 예제 앱에는 동그라미가 그려진 여러 개의 버튼이 있습니다. 각각의 버튼을 누르면 각각의 애니메이션이 실행됩니다. 애니메이션의 내용은 모두 동일합니다. 동그라미의 크기가 줄어들었다 다시 원래 크기로 복원됩니다. 대신 애니메이션을 구현하는 방법은 서로 다릅니다. 비교를 위해 애니메이션을 적용하지 않은 경..

React Native(2015년)부터 Flutter(2018년), SwiftUI(2019년), Jetpack Compose(2021년)까지 등장하면서 선언형 UI 프로그래밍이 새로운 앱 개발 방식으로 자리잡았습니다. 왜 선언형 UI 프로그래밍을 사용할까요? Flutter, SwiftUI, Jetpack Compose 각각의 방법으로 예제 앱을 구현해서 비교하며 그 이유를 살펴보겠습니다. 선언형 UI 프로그래밍과 대비되는 기존의 방식을 명령형 UI 프로그래밍이라고 합니다. 두 방식의 결정적 차이는 ‘앱 상태(state)의 변화를 UI에 반영하는 방식’에 있습니다. 예를 들어 UI 객체에 대응하는 어떤 변수가 있을 때 그 변수의 값이 바뀌면 당연히 UI에도 반영돼야 합니다. 그럴 때 기존의 명령형 UI 프..