搜索插件、代码仓与 APP 分类

插件详情v1.0.0

stepo

一个用于可自定义动画持续时间、颜色和大小的动画单位步进器的 Flutter 包。

近 30 天下载
15
喜欢数
25
Pub 分数
40

安装插件

flutter pub add stepo

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Stepo 是一个 Flutter 包,提供了一个可自定义动画持续时间、颜色和大小的动画单位步进器小部件。它能够为数值输入实现流畅且视觉上吸引人的增减交互,非常适合对用户输入精度有要求的表单或设置。该包支持轻松集成,并在样式上提供了灵活性,以匹配应用主题。无平台限制,可在所有 Flutter 支持的平台上运行。

适合场景

  • 需要精确数字调整的表单输入
  • 移动应用中的可自定义数字选择器
  • 带有视觉反馈的交互式 UI 组件
  • 带有增量值的设置面板
  • 增强的电子商务购物车用户体验

主要特点

  • 可自定义的动画持续时间
  • 可配置的颜色和尺寸
  • 流畅、动画过渡
  • 与 Flutter 的轻松集成
  • 支持递增和递减操作

适合对象

  • 开发交互式表单的开发者
  • 注重设计的 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。