인문주의 사피엔스

Flutter에서 UI 구성을 위해 위젯(widget)을 배치(layout)하는 방식은 위젯의 다양성, 유연성, 확장성 면에서 볼 때 매우 훌륭합니다. 위젯을 제대로 활용하려면 Flutter UI 프로그래밍의 핵심 주제의 하나인 제약(constraint)을 제대로 이해해야 합니다. Flutter 문서가 위젯의 배치와 제약을 상세히 설명하고 있음에도 불구하고 그 내용을 프로그래밍에 적용할 때는 적잖은 시행착오를 겪게 됩니다. 그런 시행착오의 결과로서 위젯의 배치와 제약에 대해 정리해 보기로 했습니다. 다음 공식 웹페이지의 내용을 함께 보면 Flutter의 위젯 배치 방식을 이해하는 데 많은 도움이 될 것입니다. https://docs.flutter.dev/development/ui/layout/constr..

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