로딩바 (Loading Indicator)

로딩 인디케이터는 앱이 데이터를 가져오거나 작업을 수행하는 동안 사용자에게 진행 상황을 시각적으로 표시하는 중요한 요소입니다. 로딩 인디케이터는 앱의 사용자 경험을 향상시키고 로딩 화면을 관리하는데 도움이 됩니다.

기본 로딩

기본 로딩 위젯은 앱에서 데이터를 가져오거나 어떤 작업을 수행하는 동안 사용자에게 진행 상황을 시각적으로 표시하기 위한 중요한 요소입니다.

기능

• 색상 지정: 사용자 정의 색상 목록을 통해 로딩 위젯의 색상을 변경할 수 있습니다.

• 인디케이터 선택: 다양한 인디케이터 디자인 중에서 선택할 수 있습니다.

• 체크박스: 체크박스를 사용하여 각 로딩 인디케이터의 색상을 지정할 수 있습니다.

• 확인하기: 변경된 설정을 확인할 수 있는 버튼을 제공합니다.

사용법

1. 인디케이터 선택: 원하는 로딩 인디케이터를 선택합니다. 인디케이터는 여러 가지 디자인으로 나타낼 수 있으며, 각각 다른 스타일을 가집니다.

2. 색상 지정: 체크박스를 사용하여 각각의 인디케이터에 대한 색상을 선택합니다. 체크박스를 선택하면 로딩 인디케이터의 색상이 변경됩니다.

3. 확인하기: 설정을 변경한 후 "확인하기" 버튼을 눌러 변경된 설정을 확인합니다. 이를 통해 선택한 인디케이터와 색상이 실제로 어떻게 보여지는지 확인할 수 있습니다.

예제

StandardLoading(
  colorsList: [Colors.blue, Colors.red, Colors.green],
  checkBoxValues: [false, false, false],
  labels: ['파란색', '빨간색', '초록색'],
);

위 코드는 기본 로딩 위젯을 사용한 예제입니다. 기본 로딩 위젯을 사용하면 앱에서 데이터 로딩 중에 사용자에게 시각적 피드백을 제공할 수 있습니다. 다양한 인디케이터와 색상 조합을 사용하여 사용자 경험을 향상시키고 로딩 화면을 더욱 효과적으로 관리할 수 있습니다. 기본 로딩 위젯을 활용하여 사용자에게 진행 상황을 시각적으로 표시하고, 사용자 경험을 개선할 수 있습니다.

단계 로딩

단계 로딩 위젯은 앱에서 여러 작업 단계의 진행 상황을 사용자에게 시각적으로 표시하는 데 사용됩니다. 단계 로딩 위젯을 사용하면 앱에서 복잡한 작업 단계를 시각적으로 표시하고 사용자에게 진행 상황을 명확하게 전달할 수 있습니다. 로딩 바의 형태와 스타일을 선택하여 사용자 경험을 향상시킬 수 있습니다. 이렇게 단계 로딩 위젯을 활용하여 앱에서 작업 단계의 진행 상황을 시각적으로 표시하고, 사용자에게 더 나은 경험을 제공할 수 있습니다.

기능

• 다양한 형태: 선형 및 원형 로딩 바로 다양한 형태의 단계 로딩 위젯을 사용할 수 있습니다.

• 색상 커스터마이징: 로딩 바의 색상을 사용자 정의할 수 있습니다.

• 아이콘 지원: 아이콘을 추가하여 각 단계를 더욱 명확하게 표시할 수 있습니다.

사용법

1. 선형 로딩 바: 선형 로딩 바를 사용하여 작업 단계의 진행 상황을 표시합니다. 여러 가지 형태와 스타일을 선택할 수 있습니다.

2. 원형 로딩 바: 원형 로딩 바는 원 모양으로 진행 상황을 표시합니다. 선택한 스타일과 색상을 적용할 수 있습니다.

3. 작업 단계 증가: 버튼을 통해 작업 단계를 증가시키면 로딩 바의 상태가 변경됩니다.

StepLoading

StepLoading은 다양한 스타일 옵션을 제공하여 단계별 진행 상태를 시각적으로 나타낼 수 있는 위젯입니다.

1. StepLoading.selected (선택형 스타일)

선택형 StepLoading 스타일은 현재 단계와 이전 단계가 선택된 스타일입니다. 선택된 단계와 선택되지 않은 단계를 구별하여 표시합니다.

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은 일련의 단계를 수평 라인으로 표시합니다. 각 단계의 상태를 나타내며, 현재 단계를 강조합니다.

StepLoadings(
  StepLoading.line,
  currentStep: currentStep,
  size: 8,
  totalSteps: 100,
);

3. StepLoading.icon (아이콘 스타일)

아이콘 스타일의 StepLoading은 단계를 아이콘으로 나타냅니다. 선택된 단계와 선택되지 않은 단계에 각기 다른 아이콘을 사용할 수 있습니다.

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은 선택된 단계와 선택되지 않은 단계의 크기를 각각 설정할 수 있습니다.

StepLoadings(
  StepLoading.customsize,
  totalSteps: 10,
  currentStep: currentStep,
  selectedColor: Colors.pink,
  unselectedColor: Colors.amber,
);

5. StepLoading.gradient (그라데이션 스타일)

그라데이션 스타일의 StepLoading은 단계 표시에 그라데이션 효과를 적용합니다. 선택된 단계와 선택되지 않은 단계 간의 그라데이션 색상을 지정할 수 있습니다.

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 스타일은 단계별로 나뉜 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계를 시각적으로 구별합니다.

CircularStepLoadings(
  CircularStepLoading.standard,
  totalSteps: 10,
  currentStep: currentStep,
  width: 80,
  height: 80,
);

2. CircularStepLoadings.color (색상 스타일)

색상 Circular StepLoading 스타일은 그라데이션 색상을 적용할 수 있는 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계에 서로 다른 색상을 지정할 수 있습니다.

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 스타일은 선택된 단계와 선택되지 않은 단계를 나타내는 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계의 크기를 조절할 수 있습니다.

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 스타일은 라운드 캡 효과를 적용한 원형 로딩바를 표시합니다. 선택된 단계와 선택되지 않은 단계를 강조합니다.

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 스타일은 각 단계를 아이콘으로 나타냅니다. 선택된 단계와 선택되지 않은 단계에 다른 아이콘을 사용할 수 있습니다.

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. 목록형 스켈레톤 로딩: SkeletonListTile 위젯을 사용하여 목록형 스켈레톤 로딩을 구현할 수 있으며, 제목, 부제목, 이미지 등 다양한 요소를 커스터마이즈할 수 있습니다.

4. 문단형 스켈레톤 로딩: SkeletonParagraph 위젯을 사용하여 긴 텍스트 문단의 스켈레톤 로딩을 만들고, SkeletonParagraphStyle을 사용하여 텍스트 라인 수와 간격을 조절할 수 있습니다.

LineSkeletonSamples();

위 코드는 스켈레톤 로딩 위젯을 사용한 예제입니다. 스켈레톤 로딩 위젯을 사용하면 데이터가 로드되는 동안 사용자에게 로딩 상태를 시각적으로 표시할 수 있어, 사용자 경험을 향상시키는 데 도움이 됩니다. 다양한 형태와 스타일의 스켈레톤 로딩을 활용하여 앱의 로딩 화면을 보다 효과적으로 디자인할 수 있습니다. 스켈레톤 로딩 위젯을 사용하여 사용자에게 로딩 상태를 시각적으로 표시하고, 앱의 로딩 화면을 개선할 수 있습니다.

Skeleton Line

SkeletonLine은 선형 스켈레톤 로딩을 구현하는 위젯입니다. 이 로딩은 주로 데이터가 로드 중임을 사용자에게 알리는 데 사용됩니다.

SkeletonLine(
  style: SkeletonLineStyle(
    padding: EdgeInsets.all(16.0),
    borderRadius: BorderRadius.circular(24),
  ),
);

• SkeletonLine은 선형 스켈레톤 로딩을 생성합니다.

• SkeletonLineStyle은 스켈레톤 라인의 스타일을 지정합니다.

Skeleton ListTile

SkeletonListTile은 목록 항목을 나타내며, 스켈레톤 로딩을 사용하여 해당 항목이 로딩 중임을 표시할 수 있습니다.

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는 프로필 사진이나 아바타를 나타내며, 로딩 중임을 표시하는 데 사용됩니다.

SkeletonAvatar(
  style: SkeletonAvatarStyle(
    borderRadius: BorderRadius.circular(8),
    height: 62,
    width: 62,
  ),
);

• SkeletonAvatar는 프로필 사진 또는 아바타를 나타내는 스켈레톤 로딩을 생성합니다.

• SkeletonAvatarStyle은 아바타의 스타일을 정의합니다.

Skeleton Paragraph

SkeletonParagraph는 문단형 스켈레톤 로딩을 구현하는 위젯입니다. 주로 긴 텍스트 블록이 로딩 중임을 표시하는 데 사용됩니다.

SkeletonParagraph(
  style: SkeletonParagraphStyle(
    spacing: 6,
    lineStyle: SkeletonLineStyle(
      height: 16,
      randomLength: true,
      borderRadius: BorderRadius.circular(16),
    ),
  ),
);

• SkeletonParagraph은 문단형 스켈레톤 로딩을 생성합니다.

• SkeletonParagraphStyle은 문단의 스타일을 정의합니다.

• spacing은 각 줄 사이의 간격을 설정합니다.

• lineStyle은 각 줄의 스타일을 정의합니다.

스켈레톤 로딩 위젯은 데이터 로딩 중 레이아웃을 유지하고 사용자에게 로딩이 진행 중임을 시각적으로 알리는 데 유용합니다. 각각의 위젯은 사용자 경험을 향상시키기 위해 다양한 스타일과 설정 옵션을 제공합니다.