패키지, 저장소 및 앱 카테고리 검색

패키지 상세v0.1.0

wave_progress_bars

패키지는 Flutter 프로젝트에 파도 바를 쉽게 추가할 수 있는 방법을 제공합니다.

30일 다운로드
21
좋아요
29
Pub 점수
40

패키지 설치

flutter pub add wave_progress_bars

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

WaveProgressBars는 애니메이션 웨이브 모양의 프로그레스 바를 애플리케이션에 쉽게 통합할 수 있도록 도와주는 Flutter 패키지입니다. 부드럽고 유연한 웨이브 애니메이션을 제공하여 로딩 또는 진행 상태를 시각적으로 표현합니다. 현대적인 UI에 적합하며, 동적이고 매력적인 인디케이터로 사용자 경험을 향상시킵니다. 이 패키지는 가볍고 구현이 간단하며 최소한의 설정만 필요합니다. 디자인 요구 사항에 맞게 웨이브 색상, 속도, 진폭을 사용자 정의할 수 있습니다.

사용 사례

  • 양식 내 로딩 표시기
  • 데이터 가져오기 중 시각 피드백
  • 인터랙티브 앱 온보딩
  • 애니메이션 진행 추적
  • 게임화 앱 요소

주요 기능

  • 부드러운 파도 애니메이션
  • 사용자 지정 가능한 파도 색상
  • 조정 가능한 파동 속도
  • 사용자 정의 가능한 진폭
  • 간단한 API 통합
  • 경량이고 효율적

적합한 대상

  • 현대적인 앱 인터페이스
  • 사용자 참여 기능
  • 로딩 상태 시각화
  • 디자인 중심 개발자
  • 고유한 진행 표시기가 필요한 앱

고려 사항

  • 파형 스타일 진행만 지원
  • iOS/Android 플랫폼 전용 스타일링에 내장된 지원 없음
  • 저사양 기기에서는 성능 조정이 필요할 수 있습니다
  • 복잡한 진행 추적 시나리오에 적합하지 않습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Wave Progress Bars

A package provides an easy way to add wave bars in Flutter project.

Getting Started

You should ensure that you add the following dependency in your Flutter project.

dependencies:
  wave_progress_bars: "^0.0.1"

You should then run flutter packages upgrade or update your packages in IntelliJ.

How to use

import 'package:wave_progress_bars/wave_progress_bars.dart';
import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(
      MaterialApp(
        title: 'Bars',
        theme: ThemeData(),
        home: MyApp(),
      ),
    );

class MyApp extends StatelessWidget {
  final List<double> values = [];

  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData = MediaQuery.of(context);
    var rng = new Random();
    for (var i = 0; i < 100; i++) {
      values.add(rng.nextInt(70) * 1.0);
    }
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text("bars"),
      ),
      body: Center(
        child: WaveProgressBar(
          progressPercentage: 20,
          listOfHeights: values,
          width: queryData.size.width,
          initalColor: Colors.grey,
          progressColor: Colors.red,
          backgroundColor: Colors.white,
          timeInMilliSeconds: 2000,
          isHorizontallyAnimated: true,
          isVerticallyAnimated: true,
        ),
      ),
    );
  }
}

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.