본문 바로가기
728x90
반응형

FLUTTER427

플러터 SliverAppBar로 동적이고 유연한 앱바 구현하기 앱의 상단에 위치하는 AppBar는 사용자가 앱을 탐색하는 데 중요한 역할을 합니다.Flutter는 다양한 형태의 AppBar를 제공하는데, 그 중 SliverAppBar는 스크롤에 반응하여 크기와 형태가 변하는 유연한 AppBar를 구현할 수 있는 위젯입니다.이번 글에서는 SliverAppBar의 기본 사용법과 다양한 옵션을 알아보겠습니다.  SliverAppBar 위젯이란?SliverAppBar는 스크롤 가능한 영역에서 사용되는 AppBar로, 스크롤에 따라 크기나 위치가 동적으로 변화할 수 있는 특징이 있습니다. 이 위젯은 주로 긴 리스트나 큰 콘텐츠를 표시할 때 사용되며, 앱의 상단바를 더 유연하게 제어할 수 있습니다.기본 사용법SliverAppBar는 CustomScrollView 위젯 내에서 .. 2024. 8. 3.
플러터 ChoiceChip으로 선택형 UI 구현하기 Flutter는 사용자 인터페이스를 구성할 때 유용한 다양한 위젯을 제공합니다.그중 ChoiceChip 위젯은 사용자가 여러 옵션 중 하나를 선택할 수 있게 해주는 훌륭한 도구입니다.오늘은 ChoiceChip 위젯의 기본 사용법과 다양한 옵션을 살펴보겠습니다. ChoiceChip 위젯이란?ChoiceChip은 Flutter에서 제공하는 Material 디자인 위젯 중 하나로, 사용자가 여러 선택지 중 하나를 선택할 수 있도록 도와줍니다.주로 필터링, 카테고리 선택, 태그 표시 등에서 사용됩니다.ChoiceChip은 선택되었을 때와 그렇지 않을 때의 상태를 시각적으로 구분할 수 있습니다.기본 사용법ChoiceChip 위젯을 사용하려면 label로 표시할 텍스트나 위젯을 제공하고, selected 상태를 관.. 2024. 8. 3.
플러터 Hero 위젯으로 매끄러운 페이지 전환 애니메이션 구현하기 애니메이션은 사용자 경험을 향상시키는 중요한 요소 중 하나입니다.Flutter는 개발자가 간단하게 애니메이션을 구현할 수 있도록 다양한 위젯을 제공하며, 그중 Hero 위젯은 페이지 전환 시 시각적으로 일관된 전환 효과를 제공하는데 매우 유용한 도구입니다.오늘은 Hero 위젯의 기본 사용법과 다양한 옵션에 대해 알아보겠습니다.Hero 위젯이란?Hero 위젯은 페이지 전환 시 특정 위젯의 시각적 요소를 다음 페이지로 자연스럽게 이어주는 역할을 합니다.이를 통해 사용자는 두 페이지 간에 일관된 요소를 인지하며, 전환 애니메이션이 더욱 부드럽고 매끄럽게 느껴집니다.기본 사용법Hero 위젯을 사용하기 위해서는 두 페이지에서 동일한 tag를 가진 위젯을 정의해야 합니다.이 tag는 Hero 위젯이 어떤 요소를 연.. 2024. 8. 3.
플러터 Stepper 위젯으로 쉽고 멋진 단계별 UI 만들기 Flutter는 다양한 UI 위젯을 제공하여 개발자들이 아름다운 앱을 쉽게 만들 수 있게 도와줍니다.그중에서도 Stepper 위젯은 사용자에게 단계별로 작업을 진행하도록 유도할 때 유용한 UI 컴포넌트입니다.오늘은 Flutter의 Stepper 위젯을 쉽게 이해하고, 활용할 수 있도록 설명하겠습니다. Stepper 위젯이란?Stepper 위젯은 사용자가 여러 단계의 작업을 수행할 수 있도록 돕는 UI 요소입니다.이 위젯은 단계적으로 작업을 안내하거나, 설문조사, 주문 절차 등의 여러 단계를 시각적으로 나타낼 때 유용합니다.단계는 일반적으로 숫자나 아이콘으로 표시되며, 각 단계에는 제목과 내용을 포함할 수 있습니다.기본 사용법먼저, Stepper 위젯의 기본적인 사용법을 알아보겠습니다.Stepper 위젯은.. 2024. 8. 2.
플러터 .adaptive 속성으로 플랫폼에 맞춘 위젯 사용하기[ Android / IOS ] Flutter는 하나의 코드베이스로 iOS, Android, 웹 등 다양한 플랫폼에 적응할 수 있는 앱을 개발할 수 있게 해줍니다.하지만 각 플랫폼마다 사용자 경험(UX)이 다르기 때문에, 때로는 플랫폼에 맞는 디자인 요소를 사용하는 것이 중요합니다..adaptive 속성은 이러한 문제를 해결하기 위해 Flutter에서 제공하는 기능으로, 플랫폼에 맞춘 위젯 스타일을 적용할 수 있게 도와줍니다. 오늘은 이 .adaptive 속성의 사용법과 다양한 옵션에 대해 알아보겠습니다..adaptive 속성이란? .adaptive 속성은 Flutter에서 제공하는 기능으로, 특정 위젯을 사용자가 사용 중인 플랫폼에 맞게 자동으로 변경해줍니다.예를 들어, iOS에서는 Cupertino 스타일의 위젯을, Android에.. 2024. 8. 2.
플러터 FittedBox 위젯으로 깔끔한 크기 조정과 레이아웃 관리하기 Flutter는 다양한 레이아웃 관리 도구를 제공하여 개발자들이 UI 요소를 효율적으로 배치할 수 있게 도와줍니다. 그중 FittedBox 위젯은 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조절하고 싶을 때 사용하기 좋은 도구입니다. 오늘은 FittedBox 위젯의 사용법과 다양한 옵션에 대해 알아보겠습니다. FittedBox 위젯이란?FittedBox는 Flutter에서 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조정하는 위젯입니다.이를 통해 자식 위젯이 부모의 경계를 넘어가는 것을 방지하고, 다양한 크기와 해상도에서 깔끔한 레이아웃을 유지할 수 있습니다.기본 사용법FittedBox는 자식 위젯을 포함하며, 그 자식 위젯의 크기를 자동으로 조정합니다.기본적으로 FittedBox는 자식의 크기가 부모.. 2024. 8. 2.
728x90
반응형

티스토리툴바