搜尋套件、儲存庫與 APP 分類

simple_chips_input 封面
套件詳情v1.2.2

simple_chips_input

包含兩個庫以建立晶片和選擇晶片的最可自訂套件

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1050
喜歡數
51
Pub 分數
150

安裝套件

flutter pub add simple_chips_input

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Simple Chips Input 是一個高度可自訂的 Flutter 套件,提供兩個程式庫用於建立和管理晶片與晶片選擇。它讓開發者能輕鬆建構互動式的標籤類元件,支援單一與多重選擇。此套件設計具彈性,允許自訂外觀、行為與互動模式。適用於表單、篩選或標籤系統,提供簡潔的 API,可在所有主要平台上動態建立和管理晶片。

適用情境

  • 帶有標籤選擇的表單輸入
  • 篩選介面
  • 用戶生成的標籤
  • 動態晶片列表
  • 搜尋建議
  • 多選下拉框

主要特色

  • 高度可自訂的晶片樣式
  • 支援單選與多選
  • 內建驗證與錯誤處理
  • 跨平台相容性
  • 與文字欄位的輕鬆整合
  • 可擴充的事件回呼

適合對象

  • 開發表單組件的開發者
  • 需要靈活晶片組件的UI設計師
  • 需要基於標籤輸入的應用程式
  • 具有多選需求的專案
  • 重視跨平台一致性的團隊

使用建議

  • 需要了解 Flutter 狀態管理
  • 可能需要額外的邏輯來處理複雜的驗證
  • 自訂選項可能會增加程式碼複雜度
  • 除了基本範例之外,文件內容有限
  • 未針對極大資料集進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

simple_chips_input

Features 🚀

The working screen captures might be outdated.
Please refer to the demo: https://simplechipsinput.vercel.app
  • Create chips from user's text input and get the value after form submission.
  • Select chips and get the values of the selection.
  • Select only one chip at a time and get the value (acts as a toggle/radio button).
  • Ability to keep some/all/none pre-selected chips (that can be later changed according to user input).
  • Full customisability of the chips - keeping prefix/suffix icons (that can be changed when a particular chip is selected).
  • Full customisability of the chips design - change the background color, border color, text color, etc of the chips (can be two sets of designs - one for selected chips and one for unselected chips).
  • Much more!

Contents 📚

  • Create chips from user's text input and get the value after form submission. Read the API reference for full documentation.
  • Select pre-defined chips to get the value of selected chips. Read the API reference for full documentation.

Importing the package ⬇️

import 'package:simple_chips_input/simple_chips_input.dart';
import 'package:simple_chips_input/select_chips_input.dart';

Working ⚙️

For example usage, refer pub.dev example
Author

@danger-ahead

所屬分類

原始碼儲存庫

使用此套件的專案