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

패키지 상세v1.0.2+1

animated_progress_button

버튼을 전문적으로 만들기 위한 해결책을 찾고 계신가요? 이 패키지는 Pinterest에서 영감을 받은 모든 애니메이션을 제공합니다.

30일 다운로드
9
좋아요
26
Pub 점수
30

패키지 설치

flutter pub add animated_progress_button

패키지 개요

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

animated_progress_button 패키지는 Pinterest를 영감으로 삼아 부드럽고 시각적으로 매력적인 애니메이션을 기존 버튼에 강화합니다. 개발자가 대기, 로딩, 성공과 같은 상태 간 전환되는 상호작용 가능한 진행률 버튼을 만들 수 있으며, 사용자 정의 가능한 시각적 요소와 동작을 지원합니다. 현대적인 UI에 적합하며, 폼 제출이나 데이터 처리와 같은 작업 중에 동적 피드백을 제공합니다. 이 패키지는 가볍고 쉽게 통합할 수 있어 복잡한 코드 없이도 사용자 인터페이스에 고급스러운 느낌을 더해줍니다. 애니메이션 스타일은 반응형 피드백을 통해 사용자 참여도를 높이도록 설계되었습니다.

사용 사례

  • 시각적 피드백이 있는 폼 제출
  • 모바일 앱에서의 로딩 상태
  • 인터랙티브 액션 버튼
  • 전자상거래 앱에서 사용자 경험 향상
  • 매력적인 온보딩 흐름 만들기

주요 기능

  • Pinterest를 영감으로 한 애니메이션 디자인
  • 사용자 정의 가능한 버튼 상태
  • 대기/로드/성공 상태 간의 부드러운 전환
  • Flutter 위젯과의 간편한 통합
  • 사용자 정의 색상 및 아이콘 지원

적합한 대상

  • 정교한 UI 요소를 찾는 개발자
  • 직관적인 사용자 피드백이 필요한 앱
  • 디자인 중심의 Flutter 프로젝트
  • 상호작용 양식을 갖춘 모바일 애플리케이션
  • 현대적이고 매력적인 인터페이스를 목표로 하는 팀

고려 사항

  • 제한된 플랫폼별 사용자 지정
  • 접근성 기능에 대한 내장 지원 없음
  • 애니메이션은 저사양 기기에서 성능에 영향을 줄 수 있습니다
  • 상태 관리를 수동으로 처리해야 합니다
  • 매우 복잡한 상호작용 워크플로에 적합하지 않음

원본 README

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

Animated Progress Button

Animated loading button to make you app button looks smoother. Take inspritation from Pinterest https://www.pinterest.com/pin/671177150707141229/

alt text

Usages

Create animatedButtonController for controlling the button.

import 'package:animated_progress_button/animated_progress_button.dart';

final AnimatedButtonController animatedButtonController = AnimatedButtonController();

Then customize the button like your own way Noted that you must call animatedButtonController.completed() after getting response from server in order to complete the button animation

AnimatedButton(
   controller: animatedButtonController,
   color: Colors.greenAccent,
   text: 'Log in',
   loadingText: 'Loading',
   loadedIcon: Icon(Icons.check, color: Colors.white),
   onPressed: () async {
       /// calling your API here and wait for the response.
       await Future.delayed(Duration(seconds: 5)); // simulated your API requesting time.
       animatedButtonController.completed(); // call when you get the response
       await Future.delayed(Duration(seconds: 2));
       animatedButtonController.reset(); // call to reset button animation
   },
),

카테고리

소스 저장소

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

아직 데이터가 없습니다.