cascade_widget 1.0.5

Cascade Widget For Flutter Web

Flutter web 级联组件/单选、多选组件

• 组件支持级联选择，支持搜索筛选 (support: Web)
• 组件支持单选多选操作，支持搜索筛选 (support: Web、Android、iOS)

Preview

Usage

/// 级联操作
CascadeWidget(
  list: testList,
  selectedCallBack: (selectedList) {
    for (final e in selectedList) {
      debugPrint('name:${e.name}, id:${e.id}');
    }
    },
  fieldDecoration: FieldDecoration(
    hintText: '请选择',
    hintStyle: const TextStyle(color: Colors.black45),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(
        color: Colors.black87,
      ),
    ),
  ),
  chipDecoration: const ChipDecoration(
    backgroundColor: Colors.blueAccent,
    runSpacing: 2,
    spacing: 10,
    labelStyle: TextStyle(
      color: Colors.white,
    ),
    deleteIcon: Icon(Icons.clear_outlined,
    color: Colors.white, size: 16)),
),

MultipleSelectWidget(
  list: mulList,
  selectedCallBack: (selectedList) {
    for (final e in selectedList) {
      debugPrint('name:${e.name}, id:${e.id}');
    }
    },
  fieldDecoration: FieldDecoration(
    hintText: '多选',
    hintStyle: const TextStyle(
      color: Colors.black45,
      fontSize: 14,
    ),
    padding: const EdgeInsets.symmetric(
      horizontal: 12,
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(4),
      borderSide: const BorderSide(
        color: Colors.black87,
      ),
    ),
    clearIcon: const Icon(
      Icons.clear,
      size: 14,
    ),
    style: const TextStyle(
      fontSize: 14,
    ),
    ),
    chipDecoration: const ChipDecoration(
      backgroundColor: Colors.black12,
      padding: EdgeInsets.symmetric(
        horizontal: 6,
        vertical: 2,
      ),
      runSpacing: 0,
      spacing: 5,
      labelStyle: TextStyle(
        color: Colors.black87,
        fontSize: 12,
      ),
      borderRadius: BorderRadius.all(Radius.circular(4)),
      deleteIcon: Icon(
        Icons.clear_outlined,
        color: Colors.black54,
        size: 15,
      ),
    ),
    popupDecoration: const PopupDecoration(
      isShowFullPathFromSearch: false,
      popupHeight: 300,
    ),
)