본문 바로가기
728x90

UI디자인34

플러터에서 Flex 위젯 사용 방법 및 주요 옵션 Flex 위젯은 플러터에서 레이아웃을 구성할 때 사용되는 위젯으로, 주로 Row와 Column의 기초가 되는 위젯입니다.Flex는 축(Axis)을 기준으로 자식 위젯들을 배치하며, 자식 위젯들이 남는 공간을 어떻게 채울지 정의하는 다양한 속성을 제공합니다.이 포스트에서는 Flex 위젯의 사용 방법과 주요 옵션들에 대해 설명합니다.1. Flex 위젯의 기본 개념 Flex 위젯은 주어진 축을 따라 자식 위젯들을 정렬하는 컨테이너입니다.Row와 Column은 각각 수평과 수직 축에 고정된 Flex 위젯으로, Flex는 축을 직접 지정할 수 있는 보다 일반적인 형태입니다.기본 사용법Flex 위젯의 기본 사용법은 다음과 같습니다.Flex( direction: Axis.horizontal, children: [.. 2024. 8. 6.
플러터 ExpansionTile 위젯: 사용방법 및 옵션 ExpansionTile 위젯은 타이틀과 리딩(leading) 아이콘을 제공하고, 제목을 탭하면 확장되어 추가 콘텐츠를 표시할 수 있는 위젯입니다.주로 앱 내에서 메뉴, FAQ, 설정 항목 등을 구현할 때 사용됩니다.이 글에서는 ExpansionTile 위젯의 기본 사용법과 다양한 옵션들을 소개하겠습니다.1. ExpansionTile 기본 사용법ExpansionTile의 가장 기본적인 형태는 타이틀과 확장될 때 보여질 자식 위젯들을 지정하는 것입니다.예시: 기본 ExpansionTile 사용import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override .. 2024. 8. 4.
플러터 Wrap 위젯: 사용방법 및 옵션 [자동 줄바꿈] Wrap 위젯은 자식 위젯들이 줄을 넘어가면 자동으로 줄을 바꿔 배치해주는 위젯입니다.Row나 Column처럼 가로 또는 세로 방향으로 배치할 수 있지만, 주어진 공간을 넘어갈 때 자동으로 줄바꿈이 되기 때문에 더 유연한 레이아웃 구성이 가능합니다.특히 태그, 버튼, 이미지 갤러리와 같은 UI를 만들 때 유용하게 사용할 수 있습니다.1. Wrap 위젯 기본 사용법 기본적으로 Wrap 위젯은 자식 위젯들을 가로 방향으로 배치하다가 공간이 부족하면 다음 줄로 넘깁니다.예시: 기본 Wrap 사용import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override W.. 2024. 8. 4.
플러터에서 Gauge Indicator 패키지 사용법: 쉬운 튜토리얼과 옵션 설명 오늘은 플러터 앱 개발자라면 꼭 알아야 할 멋진 패키지, gauge_indicator를 소개하려고 합니다.이 패키지는 앱에서 게이지 스타일의 인디케이터를 쉽게 구현할 수 있게 도와줍니다.초보자도 쉽게 따라 할 수 있는 방법으로, gauge_indicator의 기본 사용법부터 다양한 옵션에 대해 알아볼까요?Gauge Indicator란?Gauge Indicator는 원형 게이지와 같은 시각적 요소를 사용하여 데이터를 표현할 수 있는 플러터 패키지입니다.특히, 프로그레스 바, 게이지 지침, 축 스타일 등을 쉽게 커스터마이징 할 수 있어, 다양한 애플리케이션에 적합합니다.기본 사용법1. 패키지 설치: 먼저, pubspec.yaml 파일에 gauge_indicator 패키지를 추가하세요.dependencies:.. 2024. 8. 1.
728x90