FLUTTER ECOSYSTEM

zfnadia/grouped-checkbox

一個 Flutter 套件,可輕鬆在 Flutter 專案中以不同樣式分組複選方塊。

分組複選框 專案封面
Stars
7
Forks
8
最近推送(UTC)
2024年1月9日
專案狀態
未封存
Nadia Ferdoush GitHub avatar
GITHUB User

Nadia Ferdoush ↗

Hakuna Matata

Toronto, Ontario
語言DartSwiftDockerfileKotlinObjective-C

此儲存庫發佈的套件

使用的依賴

依賴清單 2 項
  • flutter{"sdk":"flutter"}
  • flutter_test開發依賴{"sdk":"flutter"}

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

Grouped Checkbox Widget for Flutter

pub package

Overview

The GroupedCheckbox widget enables displaying a list of checkboxes in various orientations and styles. It's designed for flexibility, supporting generic types, and offers customizable options.

Features

  • Supports generic data types.
  • Vertical, horizontal, and wrap orientations.
  • Disabled state support.
  • Callbacks for state changes.

Installation

Add grouped_checkbox to your Flutter project's dependencies.

https://raw.githubusercontent.com/zfnadia/grouped-checkbox/master/screenshots/one.jpg https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMHE3dTJxeTY4MjFyOWNxODYxazZoYzBueGJsNWVqbXk0Yjlicmd0aSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/rCxjnhgA34BFo76lxt/giphy.gif

Usage

To use this plugin, add grouped_checkbox as a dependency in your pubspec.yaml file.

dependencies: grouped_checkbox: 2.0.0
Example
import 'package:grouped_checkbox/grouped_checkbox.dart';
    final List<ColorItem> allItemList = [
      ColorItem('Red', Colors.red), 
      ColorItem('Green', Colors.green), 
      ColorItem('Blue', Colors.blue),
      ColorItem('Yellow', Colors.yellow),
      ColorItem('Black', Colors.black),
      ColorItem('Violet', Colors.purple)
    ];

    class ColorItem {
      String name;
      Color color;
    
      ColorItem(this.name, this.color);
    }

    GroupedCheckbox<ColorItem>(
      itemList: allItemList,
      checkedItemList: selectedItems,
      disabled: disabledItems,
      onChanged: (itemList) {
        updateFunction(itemList!);
      },
      orientation: orientation,
      checkColor: Colors.purpleAccent,
      activeColor: Colors.lightBlue,
      itemWidgetBuilder: (item) => Text(item.name, style: TextStyle(color: item.color)),
    )