패키지, 저장소 및 앱 카테고리 검색

GitHub 저장소holotrek/selectable_draggable_listbox

선택 가능한 드래그 가능한 목록 상자

holotrek/selectable_draggable_listbox open-source repository details.

선택 가능한 드래그 가능한 목록 상자 프로젝트 이미지
스타
1
포크
0
최근 푸시(UTC)
2024. 7. 14.
프로젝트 상태
활성

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

Pub License: MIT

selectable_draggable_listbox

Listbox with multiselect, drag & drop between lists, and reorder built in.

Features

  • Bind your data to a listview of custom widget
    • Simple text item widget -or-
    • Templated list item widget for more cusomizability
  • Multi-select items
    • Shift-click to select items in sequence
    • Ctrl/Cmd-click to select individual items
    • Single-select only option available
  • Reorderable
    • Click & drag the "three lines" icon to reorder item
  • Drag & Drop
    • Drag items from/to different lists
    • Each list may independently be a draggable, drop target, or both

Feature Demo

Getting started

  1. Add the latest version of this package:
  • Run flutter pub add selectable_draggable_listbox -or-
  • Edit pubspec.yaml and then run flutter pub get:
dependencies:
  selectable_draggable_listbox: ^latest_version
  1. Import the package
import 'package:selectable_draggable_listbox/selectable_draggable_listbox.dart';

Usage

// Create your list and transform it to track selected items (list can be complex objects instead):
final myList = ['Apples','Cheese','Bread','Milk'].forListbox().toList();

// Create the listbox widget
return Listbox(
  items: myList,
  itemTemplate: (context, eventManager, index, item, onSelect) {
    // Define the template used for each listitem
    return SimpleListboxItem(
      key: Key('$index'), // Key is required for reordering
      item: item,
      label: item.data,
      eventManager: eventManager,
      onSelect: onSelect,
    );
  },
  onSelect: (itemsSelected) {
    // React to items selected
    // Note: (value of isSelected is not set automatically by Listbox,
    //  due to not knowing how your state is handled)
    setState(() {
      for (var item in myList) {
        item.isSelected = itemsSelected.contains(item);
      }
    });
  },
  onReorder: (oldIndex, newIndex) {
    // React to item reordered
    setState(() {
      // Note: this is an extension provided by the package
      myList.move(oldIndex, newIndex);
    });
  },
);

Advanced Usage

For more info on additional features like Drag & Drop and Customizable Templates, see examples and API:

Support

You can support me by buying me a coffee Buy me a coffee

And also don't forget to star this package on GitHub

Evan Kaiser GitHub avatar
GitHub 작성자

Evan Kaiser ↗

언어DartC++CMakeHTMLSwiftCKotlinObjective-C

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 4 개

  • collection^1.18.0
  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}
  • flutter_lints개발 의존성^2.0.0

프로젝트에 맞는 저장소를 선택하려면?

사용 목적에 따라 검색하고 개발 활동을 비교한 뒤 원본 저장소에서 요구 사항을 확인하세요.

  1. 이름, 작성자 또는 설명으로 검색하고 기술 주제로 범위를 좁힙니다.
  2. 스타, 포크, 최근 푸시를 함께 비교하세요. 스타는 관심의 지표이며 품질을 보장하지 않습니다.
  3. 사용하기 전에 GitHub에서 README, 라이선스, Issues를 확인하세요.

출처 및 관리

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗