본문 바로가기

개발

머티리얼(material) 디자인 위젯 머티리얼 디자인은 구글이 개발한 디자인 가이드라인으로, 모바일 및 웹 애플리케이션에서 사용되는 UI/UX 요소를 표준화하고 일관성을 유지할 수 있도록 돕습니다. Flutter에서는 머티리얼 디자인 가이드라인을 준수하는 위젯을 제공합니다. 이번에는 머티리얼 디자인 위젯 중 몇 가지를 소개하겠습니다. AppBar: 앱의 상단에 표시되는 바입니다. 주로 제목이나 로고, 메뉴 등의 내용을 담습니다. BottomNavigationBar: 화면 하단에 표시되는 탭바입니다. 각 탭을 누르면 해당 내용이 화면에 표시됩니다. Card: 정보를 담은 카드를 표시하는 위젯입니다. 카드 내부에는 이미지, 텍스트, 버튼 등의 요소를 포함할 수 있습니다. FloatingActionButton: 주요 작업을 수행할 수 있는 버튼입.. 더보기
상태관리(State Management) 개념 상태관리(State Management)는 애플리케이션의 상태를 관리하는 방법입니다. 애플리케이션의 상태란 사용자 입력, 네트워크 요청, 데이터 변경 등에 의해 변하는 값들을 말합니다. 이러한 상태를 관리하는 것은 애플리케이션의 성능과 사용자 경험을 개선하는 데 매우 중요합니다. Flutter에서는 여러 가지 상태관리 방법을 제공합니다. 가장 기본적인 방법은 StatefulWidget을 이용하여 상태를 관리하는 것입니다. StatefulWidget은 상태가 변경될 때마다 화면을 다시 그립니다. 또 다른 방법으로는 Provider 패키지를 이용하는 것이 있습니다. Provider는 InheritedWidget을 이용하여 상태를 관리하며, 상태가 변경될 때마다 화면을 다시 그리지 않아도 되기 때문에 성능이 .. 더보기
애니메이션(Animation) 개념 Flutter의 애니메이션(Animation)은 객체의 특정 속성값을 시간에 따라 변경하는 것입니다. 예를 들어, 위젯의 위치, 크기, 색상 등의 속성값을 변경하여 애니메이션을 구현할 수 있습니다. Flutter에서 애니메이션은 크게 세 가지 요소로 구성됩니다. Animation Controller 애니메이션의 시작과 끝을 제어하며, 애니메이션의 진행 상태를 관리합니다. Animation 애니메이션을 위해 정의한 시작값과 끝값 사이를 보간(interpolate)하여 애니메이션의 중간 값(간격)을 계산합니다. Animation Widget 애니메이션을 실제로 실행할 위젯입니다. 이 세 가지 요소를 조합하여, 애니메이션을 구현할 수 있습니다. Animation Controller와 Animation은 둘 다.. 더보기
레이아웃(Layout) 개념 Flutter에서 레이아웃은 위젯을 배치하는 방법을 말합니다. Flutter에서는 다양한 레이아웃을 제공하고 있으며, 다음과 같은 주요 레이아웃 위젯들이 있습니다. Container 자식 위젯을 감싸고, 크기, 패딩(padding), 여백(margin), 배경 색상 등을 지정할 수 있는 가장 기본적인 레이아웃 위젯입니다. Row / Column 가로 또는 세로로 자식 위젯을 배열합니다. 자식 위젯들 간의 간격을 조절할 수 있으며, 자식 위젯이 화면을 벗어날 경우 스크롤을 추가로 제공할 수 있습니다. Stack 자식 위젯들을 쌓아서 배치합니다. 각 위젯이 화면 상에서 어느 위치에 나타날지를 지정할 수 있습니다. Expanded / Flexible Row 또는 Column 안에서 자식 위젯들의 크기를 조정합.. 더보기
머티리얼 디자인(Material Design) 개념 머티리얼 디자인(Material Design)은 구글에서 개발한 UI 디자인 가이드라인입니다. 머티리얼 디자인은 물리적 속성(높이, 너비, 깊이 등)과 물질(Material)의 형태, 동작 등을 표현하는 것을 목표로 합니다. 머티리얼 디자인의 특징으로는 다음과 같습니다. 타이포그래피(Typography)와 색상(Color)을 중요하게 다루어, 일관성 있는 디자인을 제공합니다. 그림자, 모서리 라운딩 등의 물리적인 속성을 활용하여 깊이(depth)와 흐름(flow)을 나타냅니다. 애니메이션과 전환(transition) 등을 사용하여 머티리얼 디자인의 핵심적인 개념인 움직임(motion)을 나타냅니다. 사용자가 상호작용하는 요소들을 직관적이고 명확하게 나타냅니다. 머티리얼 디자인은 구글의 안드로이드 플랫폼에.. 더보기
위젯(Widget) 개념 플러터(Flutter)에서 위젯(Widget)은 사용자 인터페이스(UI)의 구성요소를 나타내는 클래스입니다. 즉, 앱 화면에 보여지는 모든 것(텍스트, 이미지, 버튼, 폼 등)은 위젯으로 구성됩니다. Flutter에서는 위젯을 구성하는 두 가지 타입이 있습니다. StatelessWidget 변경되지 않는 위젯입니다. 한 번 생성되면 다시 그려지지 않습니다. 대표적인 예시로 Text, Icon, RaisedButton 등이 있습니다. StatefulWidget 변경 가능한 위젯입니다. 상태를 가지고 있으며, 상태가 변경될 때마다 다시 그려집니다. 대표적인 예시로 CheckBox, TextField, ListView 등이 있습니다. 위젯은 서로 중첩해서 사용될 수 있으며, 하나의 위젯은 여러 개의 하위 위젯.. 더보기

티스토리툴바