> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/loading-indicator.md).
# 로딩바 (Loading Indicator)
로딩 인디케이터는 앱이 데이터를 가져오거나 작업을 수행하는 동안 사용자에게 진행 상황을 시각적으로 표시하는 중요한 요소입니다. 로딩 인디케이터는 앱의 사용자 경험을 향상시키고 로딩 화면을 관리하는데 도움이 됩니다.
## 기본 로딩
기본 로딩 위젯은 앱에서 데이터를 가져오거나 어떤 작업을 수행하는 동안 사용자에게 진행 상황을 시각적으로 표시하기 위한 중요한 요소입니다.
#### 기능
* **색상 지정**: 사용자 정의 색상 목록을 통해 로딩 위젯의 색상을 변경할 수 있습니다.
* **인디케이터 선택**: 다양한 인디케이터 디자인 중에서 선택할 수 있습니다.
* **체크박스**: 체크박스를 사용하여 각 로딩 인디케이터의 색상을 지정할 수 있습니다.
* **확인하기**: 변경된 설정을 확인할 수 있는 버튼을 제공합니다.
#### 사용법
1. **인디케이터 선택**: 원하는 로딩 인디케이터를 선택합니다. 인디케이터는 여러 가지 디자인으로 나타낼 수 있으며, 각각 다른 스타일을 가집니다.
2. **색상 지정**: 체크박스를 사용하여 각각의 인디케이터에 대한 색상을 선택합니다. 체크박스를 선택하면 로딩 인디케이터의 색상이 변경됩니다.
3. **확인하기**: 설정을 변경한 후 "확인하기" 버튼을 눌러 변경된 설정을 확인합니다. 이를 통해 선택한 인디케이터와 색상이 실제로 어떻게 보여지는지 확인할 수 있습니다.
#### 예제
```dart
StandardLoading(
colorsList: [Colors.blue, Colors.red, Colors.green],
checkBoxValues: [false, false, false],
labels: ['파란색', '빨간색', '초록색'],
);
```
위 코드는 기본 로딩 위젯을 사용한 예제입니다. 기본 로딩 위젯을 사용하면 앱에서 데이터 로딩 중에 사용자에게 시각적 피드백을 제공할 수 있습니다. 다양한 인디케이터와 색상 조합을 사용하여 사용자 경험을 향상시키고 로딩 화면을 더욱 효과적으로 관리할 수 있습니다. 기본 로딩 위젯을 활용하여 사용자에게 진행 상황을 시각적으로 표시하고, 사용자 경험을 개선할 수 있습니다.
## 단계 로딩
단계 로딩 위젯은 앱에서 여러 작업 단계의 진행 상황을 사용자에게 시각적으로 표시하는 데 사용됩니다. 단계 로딩 위젯을 사용하면 앱에서 복잡한 작업 단계를 시각적으로 표시하고 사용자에게 진행 상황을 명확하게 전달할 수 있습니다. 로딩 바의 형태와 스타일을 선택하여 사용자 경험을 향상시킬 수 있습니다. 이렇게 단계 로딩 위젯을 활용하여 앱에서 작업 단계의 진행 상황을 시각적으로 표시하고, 사용자에게 더 나은 경험을 제공할 수 있습니다.
#### 기능
* **다양한 형태**: 선형 및 원형 로딩 바로 다양한 형태의 단계 로딩 위젯을 사용할 수 있습니다.
* **색상 커스터마이징**: 로딩 바의 색상을 사용자 정의할 수 있습니다.
* **아이콘 지원**: 아이콘을 추가하여 각 단계를 더욱 명확하게 표시할 수 있습니다.
#### 사용법
1. **선형 로딩 바**: 선형 로딩 바를 사용하여 작업 단계의 진행 상황을 표시합니다. 여러 가지 형태와 스타일을 선택할 수 있습니다.
2. **원형 로딩 바**: 원형 로딩 바는 원 모양으로 진행 상황을 표시합니다. 선택한 스타일과 색상을 적용할 수 있습니다.
3. **작업 단계 증가**: 버튼을 통해 작업 단계를 증가시키면 로딩 바의 상태가 변경됩니다.
### StepLoading
StepLoading은 다양한 스타일 옵션을 제공하여 단계별 진행 상태를 시각적으로 나타낼 수 있는 위젯입니다.
#### 1. StepLoading.selected (선택형 스타일)
선택형 StepLoading 스타일은 현재 단계와 이전 단계가 선택된 스타일입니다. 선택된 단계와 선택되지 않은 단계를 구별하여 표시합니다.
```dart
StepLoadings(
StepLoading.selected,
totalSteps: 10,
currentStep: currentStep,
selectedSize: 4,
unselectedSize: 4,
selectedColor: AgnesColors.lightPrimary,
unselectedColor: Colors.blueGrey,
roundedEdges: Radius.circular(8.0),
);
```
#### 2. StepLoading.line (라인 스타일)
라인 스타일의 StepLoading은 일련의 단계를 수평 라인으로 표시합니다. 각 단계의 상태를 나타내며, 현재 단계를 강조합니다.
```dart
StepLoadings(
StepLoading.line,
currentStep: currentStep,
size: 8,
totalSteps: 100,
);
```
#### 3. StepLoading.icon (아이콘 스타일)
아이콘 스타일의 StepLoading은 단계를 아이콘으로 나타냅니다. 선택된 단계와 선택되지 않은 단계에 각기 다른 아이콘을 사용할 수 있습니다.
```dart
StepLoadings(
StepLoading.icon,
totalSteps: 6,
currentStep: currentStep,
size: 36,
selectedColor: agnesTheme.primaryColor,
unselectedColor: Colors.grey,
selectedIcon: Icon(Icons.check, color: Colors.white),
unselectedIcon: Icon(Icons.remove),
);
```
#### 4. StepLoading.customsize (사용자 정의 크기 스타일)
사용자 정의 크기 스타일의 StepLoading은 선택된 단계와 선택되지 않은 단계의 크기를 각각 설정할 수 있습니다.
```dart
StepLoadings(
StepLoading.customsize,
totalSteps: 10,
currentStep: currentStep,
selectedColor: Colors.pink,
unselectedColor: Colors.amber,
);
```
#### 5. StepLoading.gradient (그라데이션 스타일)
그라데이션 스타일의 StepLoading은 단계 표시에 그라데이션 효과를 적용합니다. 선택된 단계와 선택되지 않은 단계 간의 그라데이션 색상을 지정할 수 있습니다.
```dart
StepLoadings(
StepLoading.gradient,
size: 8,
currentStep: currentStep,
totalSteps: 100,
selectedColor: Colors.yellow,
unselectedColor: Colors.cyan,
roundedEdges: Radius.circular(10),
selectedGradientColor: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.yellowAccent, Colors.deepOrange]),
unselectedGradientColor: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.black, Colors.blue]),
);
```
이러한 StepLoading 스타일을 사용하여 앱에서 단계별 작업을 시각적으로 표현하세요. 선택한 스타일에 따라 사용자가 진행 상태를 쉽게 이해하고 조작할 수 있게 됩니다.
### CircularStepLoadings
CircularStepLoadings 위젯은 원형 단계 로딩바를 구현하기 위한 도구입니다.
#### 1. CircularStepLoadings.standard (표준 스타일)
표준 Circular StepLoading 스타일은 단계별로 나뉜 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계를 시각적으로 구별합니다.
```dart
CircularStepLoadings(
CircularStepLoading.standard,
totalSteps: 10,
currentStep: currentStep,
width: 80,
height: 80,
);
```
#### 2. CircularStepLoadings.color (색상 스타일)
색상 Circular StepLoading 스타일은 그라데이션 색상을 적용할 수 있는 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계에 서로 다른 색상을 지정할 수 있습니다.
```dart
CircularStepLoadings(
CircularStepLoading.color,
totalSteps: 12,
currentStep: currentStep,
selectedStepSize: 10.0,
selectedColor: Colors.redAccent,
unselectedColor: Colors.grey[200],
width: 80,
height: 80,
gradientColor: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.cyan, Colors.orangeAccent]),
);
```
#### 3. CircularStepLoadings.selected (선택형 스타일)
선택형 Circular StepLoading 스타일은 선택된 단계와 선택되지 않은 단계를 나타내는 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계의 크기를 조절할 수 있습니다.
```dart
CircularStepLoadings(
CircularStepLoading.selected,
totalSteps: 20,
currentStep: currentStep,
selectedStepSize: 3.0,
unselectedStepSize: 9.0,
selectedColor: Colors.cyan,
unselectedColor: Colors.yellowAccent,
width: 80,
height: 80,
);
```
#### 4. CircularStepLoadings.roundedcap (라운드 캡 스타일)
라운드 캡 Circular StepLoading 스타일은 라운드 캡 효과를 적용한 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계를 강조합니다.
```dart
CircularStepLoadings(
CircularStepLoading.roundedcap,
currentStep: currentStep,
stepSize: 10,
totalSteps: 100,
selectedColor: Colors.greenAccent,
unselectedColor: Colors.grey[200],
width: 100,
height: 100,
selectedStepSize: 15,
roundedCap: true,
);
```
#### 5. CircularStepLoadings.icon (아이콘 스타일)
아이콘 Circular StepLoading 스타일은 각 단계를 아이콘으로 나타냅니다. 선택된 단계와 선택되지 않은 단계에 다른 아이콘을 사용할 수 있습니다.
```dart
CircularStepLoadings(
CircularStepLoading.icon,
currentStep: currentStep,
child: Icon(Icons.tag_faces, color: Colors.red, size: 84),
totalSteps: 100,
selectedColor: Colors.yellow,
unselectedColor: Colors.lightBlue,
width: 100,
);
```
이러한 CircularStepLoadings 스타일을 사용하여 원형 단계 로딩바를 자유롭게 커스터마이즈하고 앱에서 단계 진행 상태를 시각적으로 표현하세요. 각 스타일은 다양한 사용 사례에 맞게 선택할 수 있어 사용자 경험을 향상시키는 데 도움이 됩니다.
## 스켈레톤 로딩
스켈레톤 로딩 위젯은 앱의 데이터를 불러오는 동안 사용자에게 시각적인 피드백을 제공하는 데 사용됩니다. 스켈레톤 로딩은 데이터가 아직 로드되지 않은 상태에서 빈 컨테이너의 형태로 표시되며, 로딩 바 형태로 사용자에게 로딩 진행 상황을 시각적으로 보여줍니다.
#### 기능
* **선형 스켈레톤 로딩**: 수평 방향으로 로딩 바가 나타나는 형태로, 여러 가지 스타일과 패딩을 지정할 수 있습니다.
* **프로필형 스켈레톤 로딩**: 프로필 사진을 포함하는 스켈레톤 로딩을 구현할 수 있으며, 크기와 모양을 커스터마이즈할 수 있습니다.
* **목록형 스켈레톤 로딩**: 목록 형태의 데이터를 불러올 때 사용하며, 제목, 부제목, 이미지 등 다양한 요소를 포함할 수 있습니다.
* **문단형 스켈레톤 로딩**: 긴 텍스트 문단의 로딩을 구현할 수 있으며, 텍스트 라인 수와 간격을 조절할 수 있습니다.
#### 사용법
1. **선형 스켈레톤 로딩**: ***`SkeletonLine`*** 위젯을 사용하여 수평 선형 스켈레톤 로딩을 구현할 수 있으며, ***`SkeletonLineStyle`***을 통해 스타일을 지정할 수 있습니다.
2. **프로필형 스켈레톤 로딩**: ***`SkeletonAvatar`*** 위젯을 사용하여 프로필형 스켈레톤 로딩을 만들고, ***`SkeletonAvatarStyle`***을 사용하여 모양 및 크기를 조절할 수 있습니다.
3. **목록형 스켈레톤 로딩**: ***`SkeletonListTil`***`e` 위젯을 사용하여 목록형 스켈레톤 로딩을 구현할 수 있으며, 제목, 부제목, 이미지 등 다양한 요소를 커스터마이즈할 수 있습니다.
4. **문단형 스켈레톤 로딩**: ***`SkeletonParagraph`*** 위젯을 사용하여 긴 텍스트 문단의 스켈레톤 로딩을 만들고, ***`SkeletonParagraphStyle`***을 사용하여 텍스트 라인 수와 간격을 조절할 수 있습니다.
```dart
LineSkeletonSamples();
```
위 코드는 스켈레톤 로딩 위젯을 사용한 예제입니다. 스켈레톤 로딩 위젯을 사용하면 데이터가 로드되는 동안 사용자에게 로딩 상태를 시각적으로 표시할 수 있어, 사용자 경험을 향상시키는 데 도움이 됩니다. 다양한 형태와 스타일의 스켈레톤 로딩을 활용하여 앱의 로딩 화면을 보다 효과적으로 디자인할 수 있습니다. 스켈레톤 로딩 위젯을 사용하여 사용자에게 로딩 상태를 시각적으로 표시하고, 앱의 로딩 화면을 개선할 수 있습니다.
### Skeleton Line
SkeletonLine은 선형 스켈레톤 로딩을 구현하는 위젯입니다. 이 로딩은 주로 데이터가 로드 중임을 사용자에게 알리는 데 사용됩니다.
```dart
SkeletonLine(
style: SkeletonLineStyle(
padding: EdgeInsets.all(16.0),
borderRadius: BorderRadius.circular(24),
),
);
```
* ***`SkeletonLine`***은 선형 스켈레톤 로딩을 생성합니다.
* ***`SkeletonLineStyle`***은 스켈레톤 라인의 스타일을 지정합니다.
### Skeleton ListTile
SkeletonListTile은 목록 항목을 나타내며, 스켈레톤 로딩을 사용하여 해당 항목이 로딩 중임을 표시할 수 있습니다.
```dart
SkeletonListTile(
hasSubtitle: true,
padding: EdgeInsets.all(16),
leadingStyle: SkeletonAvatarStyle(
shape: BoxShape.circle,
width: 72,
height: 72,
),
titleStyle: SkeletonLineStyle(height: 18),
subtitleStyle: SkeletonLineStyle(
height: 12,
maxLength: 172,
minLength: 128,
),
);
```
* ***`SkeletonListTile`***은 목록 항목을 나타내는 스켈레톤 로딩을 생성합니다.
* ***`hasSubtitle`***은 서브타이틀 (보조 텍스트)이 있는지 여부를 지정합니다.
* ***`leadingStyle`***은 항목의 왼쪽에 위치하는 아바타(아이콘 또는 이미지)의 스타일을 정의합니다.
* ***`titleStyle`***은 주요 제목 텍스트의 스타일을 정의합니다.
* ***`subtitleStyle`***은 서브타이틀 (보조 텍스트)의 스타일을 정의합니다.
### Skeleton Avatar
### 
SkeletonAvatar는 프로필 사진이나 아바타를 나타내며, 로딩 중임을 표시하는 데 사용됩니다.
```dart
SkeletonAvatar(
style: SkeletonAvatarStyle(
borderRadius: BorderRadius.circular(8),
height: 62,
width: 62,
),
);
```
* ***`SkeletonAvatar`***는 프로필 사진 또는 아바타를 나타내는 스켈레톤 로딩을 생성합니다.
* ***`SkeletonAvatarStyle`***은 아바타의 스타일을 정의합니다.
### Skeleton Paragraph
SkeletonParagraph는 문단형 스켈레톤 로딩을 구현하는 위젯입니다. 주로 긴 텍스트 블록이 로딩 중임을 표시하는 데 사용됩니다.
```dart
SkeletonParagraph(
style: SkeletonParagraphStyle(
spacing: 6,
lineStyle: SkeletonLineStyle(
height: 16,
randomLength: true,
borderRadius: BorderRadius.circular(16),
),
),
);
```
* ***`SkeletonParagraph`***은 문단형 스켈레톤 로딩을 생성합니다.
* ***`SkeletonParagraphStyle`***은 문단의 스타일을 정의합니다.
* ***`spacing`***은 각 줄 사이의 간격을 설정합니다.
* ***`lineStyle`***은 각 줄의 스타일을 정의합니다.
스켈레톤 로딩 위젯은 데이터 로딩 중 레이아웃을 유지하고 사용자에게 로딩이 진행 중임을 시각적으로 알리는 데 유용합니다. 각각의 위젯은 사용자 경험을 향상시키기 위해 다양한 스타일과 설정 옵션을 제공합니다.
.gif?alt=media&token=ecc0ff1b-7ea1-4dfd-a9da-e7eaa56b9a02)
.gif?alt=media&token=19433a2f-a626-4040-985e-c83185bce6b3)
.gif?alt=media&token=d8a1c9c4-1f51-42ac-9d2d-7e008ae58565)
.gif?alt=media&token=c1d0e172-b195-4074-8f1b-ada83558cf7c)
.gif?alt=media&token=2755acad-581b-427c-bb40-87610a4735b8)
.gif?alt=media&token=fe81758c-1754-4d23-ab46-4bc1ae44f3ab)
