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

패키지 상세v1.0.0

stepo

사용자 정의 가능한 애니메이션 지속 시간, 색상 및 크기를 지원하는 애니메이션 단위 스테퍼를 위한 플러터 패키지입니다.

30일 다운로드
15
좋아요
25
Pub 점수
40

패키지 설치

flutter pub add stepo

패키지 개요

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

Stepo는 사용자 정의 가능한 애니메이션 지속 시간, 색상 및 크기를 제공하는 애니메이션 단위 스테퍼 위젯을 제공하는 Flutter 패키지입니다. 수치 입력에 대해 부드럽고 시각적으로 매력적인 증감 상호작용을 가능하게 하며, 사용자 입력 정확도가 중요한 폼이나 설정에 적합합니다. 패키지는 쉽게 통합할 수 있으며, 앱 테마에 맞게 스타일링하는 데 유연성을 제공합니다. 플랫폼 제한 없이 모든 Flutter 지원 플랫폼에서 작동합니다.

사용 사례

  • 정밀한 숫자 조정이 필요한 폼 입력
  • 모바일 앱에서 사용자 정의 가능한 숫자 선택기
  • 시각적 피드백이 있는 상호작용 UI 컴포넌트
  • 증분 값을 가진 설정 패널
  • 전자상거래 카트에서 향상된 사용자 경험

주요 기능

  • 사용자 정의 가능한 애니메이션 지속 시간
  • 사용자 지정 가능한 색상 및 크기
  • 부드럽고 애니메이션 효과가 있는 전환
  • Flutter와의 간편한 통합
  • 증가 및 감소 작업을 모두 지원합니다

적합한 대상

  • 인터랙티브 폼을 개발하는 개발자
  • 디자인 중심의 플러터 애플리케이션
  • 정교한 숫자 입력 위젯이 필요한 앱
  • UI/UX 일관성을 우선시하는 팀
  • 동적이고 반응형 인터페이스를 갖춘 프로젝트

고려 사항

  • 값의 범위를 수동으로 처리해야 합니다
  • 숫자 스텝 기능에 한정
  • 내장된 검증 기능 없음
  • 저사양 기기에서는 애니메이션 성능이 다를 수 있습니다
  • 숫자가 아닌 데이터 유형에는 적합하지 않습니다

원본 README

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

stepo

A highly customisable Flutter package for animated unit stepper

Supported Dart Versions

Dart SDK version >= 2.1.0

Demo Gif

Stepo Demo

Installation

Pub

Add the Package

dependencies:
  stepo: ^1.0.0

How to use

Import the package in your dart file

import 'package:stepo/stepo.dart';
Basic usage :
Stepo(
  key: UniqueKey(),
),

Note: For stepo to show instant changes on hot reload, you need to provide UniqueKey() so that the widget rebuilds every time.

Customisable usage :
Stepo(
  key: UniqueKey(),
  width: 200,                                         //Optional
  backgroundColor: Colors.deepPurple,                 //Optional
  style: Style.vertical,                              //Optional
  textColor: Colors.white,                            //Optional
  animationDuration: Duration(milliseconds: 500),     //Optional
  iconColor: Colors.white,                            //Optional
  fontSize: 20,                                       //Optional
  iconSize: 30,                                       //Optional 
  initialCounter: 25,                                 //Optional
  lowerBound: 10,                                     //Optional
  upperBound: 50,                                     //Optional
  onIncrementClicked: (counter) {                     //Optional
    print("Increment clicked");
  },
  onDecrementClicked: (counter) {                     //Optional
    print("Decrement clicked");
  },
),
Customisable fields
Attribute Type Default Value
width int 160
backgroundColor color Colors.white
style vertical/horizontal Style.horizontal
textColor color Color(0xffEC645B)
animationDuration int Duration(milliseconds: 200)
iconColor color Color(0xffEC645B)
fontSize int 32
iconSize int 40
initialCounter int 0
lowerBound int 0
upperBound int 100
onIncrementClicked function (counter) {}
onDecrementClicked function (counter) {}
Inspired by

Oleg Frolov's Design

Created & Maintained By

Harpreet Singh

Damanpreet Singh

License

Copyright 2020 Harpreet Singh & Damanpreet Singh

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

카테고리

소스 저장소

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

아직 데이터가 없습니다.