搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。