본문 바로가기
반응형

Flutter/Widget105

플러터 Stepper 위젯으로 쉽고 멋진 단계별 UI 만들기 Flutter는 다양한 UI 위젯을 제공하여 개발자들이 아름다운 앱을 쉽게 만들 수 있게 도와줍니다.그중에서도 Stepper 위젯은 사용자에게 단계별로 작업을 진행하도록 유도할 때 유용한 UI 컴포넌트입니다.오늘은 Flutter의 Stepper 위젯을 쉽게 이해하고, 활용할 수 있도록 설명하겠습니다. Stepper 위젯이란?Stepper 위젯은 사용자가 여러 단계의 작업을 수행할 수 있도록 돕는 UI 요소입니다.이 위젯은 단계적으로 작업을 안내하거나, 설문조사, 주문 절차 등의 여러 단계를 시각적으로 나타낼 때 유용합니다.단계는 일반적으로 숫자나 아이콘으로 표시되며, 각 단계에는 제목과 내용을 포함할 수 있습니다.기본 사용법먼저, Stepper 위젯의 기본적인 사용법을 알아보겠습니다.Stepper 위젯은.. 2024. 8. 2.
플러터 FittedBox 위젯으로 깔끔한 크기 조정과 레이아웃 관리하기 Flutter는 다양한 레이아웃 관리 도구를 제공하여 개발자들이 UI 요소를 효율적으로 배치할 수 있게 도와줍니다. 그중 FittedBox 위젯은 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조절하고 싶을 때 사용하기 좋은 도구입니다. 오늘은 FittedBox 위젯의 사용법과 다양한 옵션에 대해 알아보겠습니다. FittedBox 위젯이란?FittedBox는 Flutter에서 자식 위젯의 크기를 부모 위젯의 크기에 맞춰 조정하는 위젯입니다.이를 통해 자식 위젯이 부모의 경계를 넘어가는 것을 방지하고, 다양한 크기와 해상도에서 깔끔한 레이아웃을 유지할 수 있습니다.기본 사용법FittedBox는 자식 위젯을 포함하며, 그 자식 위젯의 크기를 자동으로 조정합니다.기본적으로 FittedBox는 자식의 크기가 부모.. 2024. 8. 2.
플러터 showSearch 위젯으로 강력한 검색 기능 구현하기 Flutter는 모바일 애플리케이션에서 강력한 검색 기능을 쉽게 구현할 수 있도록 다양한 도구를 제공합니다.그중 showSearch 위젯은 사용자가 입력한 검색어에 따라 데이터를 필터링하고, 결과를 보여주는 데 유용한 기능을 제공합니다.오늘은 showSearch 위젯의 기본 사용법과 다양한 옵션을 살펴보겠습니다.showSearch 위젯이란?showSearch는 Flutter에서 검색 인터페이스를 쉽게 구현할 수 있도록 도와주는 함수입니다.사용자가 검색어를 입력하면, 관련된 검색 결과를 보여주는 페이지를 표시합니다.이를 통해 앱에서 복잡한 검색 로직을 간단하게 처리할 수 있습니다.기본 사용법showSearch 위젯은 검색 결과를 반환할 데이터 소스를 제공해야 합니다.이를 위해 검색 로직을 SearchDel.. 2024. 8. 2.
플러터에서 Dismissible 위젯 사용 방법과 옵션 Dismissible 위젯은 사용자가 드래그 제스처를 사용하여 위젯을 화면에서 제거할 수 있도록 하는 강력한 플러터 위젯입니다.이 블로그 게시물에서는 Dismissible 위젯의 기본 사용 방법과 사용 가능한 다양한 옵션을 살펴봅니다.Dismissible 위젯 사용 방법Dismissible 위젯을 사용하려면 다음 단계를 따르세요.Dismissible 위젯으로 감싸려는 위젯을 정의합니다.Dismissible 위젯의 key 속성을 설정합니다. 이 키는 위젯을 고유하게 식별하는 데 사용됩니다.Dismissible 위젯의 child 속성을 설정합니다. 이 속성은 Dismissible 위젯으로 감싸려는 위젯을 지정합니다.(선택 사항) onDismissed 콜백을 정의합니다. 이 콜백은 사용자가 위젯을 화면에서 제.. 2024. 8. 1.
플러터에서 showModalBottomSheet() 위젯 사용법 및 옵션 가이드 showModalBottomSheet()은 플러터에서 화면 아래에서 위로 올라오는 시트 형태의 팝업을 생성하는 데 사용하는 함수입니다.간단한 알림 표시부터 사용자 입력을 받는 복잡한 작업까지 다양한 용도로 활용할 수 있는 유용한 위젯입니다.이 블로그 글에서는 showModalBottomSheet() 위젯의 사용법과 주요 옵션들을 자세히 살펴보겠습니다.1. 기본 사용법 showModalBottomSheet() 함수를 사용하려면 다음과 같은 두 가지 매개변수를 전달해야 합니다.context: 위젯을 호출하는 BuildContext 객체builder: 바텀 시트의 내용을 정의하는 함수showModalBottomSheet( context: context, builder: (context) => Contain.. 2024. 8. 1.
플러터에서 로딩 스켈레톤 구현하기: skeletons 패키지 사용 방법과 옵션 설명 스켈레톤 로딩 애니메이션은 데이터가 로딩되는 동안 사용자에게 빈 상태를 시각적으로 표시해주는 유용한 방법입니다.1. skeletons 패키지 설치먼저 skeletons 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 추가해 주세요dependencies: flutter: sdk: flutter skeletons: ^0.0.3그런 다음 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.2. 기본 사용법이제 skeletons 패키지를 사용하여 기본 스켈레톤 로딩 애니메이션을 구현해보겠습니다.import 'package:flutter/material.dart';import 'package:skeletons/skeletons.dart';voi.. 2024. 7. 31.
반응형

티스토리툴바