select2dot1 1.0.0 copy "select2dot1: ^1.0.0" to clipboard
select2dot1: ^1.0.0 copied to clipboard

Published 23 months ago • verified publisherromanjrdykyj.site• Latest: 2.0.9
[unknown platforms]
→

Metadata

Select2dot1 give you a fully customizable single/multiple select box with support for searching, group option, extra info and avatar. Works using overlay and modal.

More...

platform build pub package pub points License: MIT Buy Me A Coffee

Select2dot1 #

Introduction #

Select2dot1 give you a customizable single/multiple select box with support for searching, group option, extra info and avatar. Select2dot1 works using overlay (web, desktop) and modal (mobile) and is fully customizable by settings and builder.

Demo web example: https://select2dot1.site

Author site: https://romanjrdykyj.site

Screenshots #

Desktop Example Mobile Example

Table of Contents #

Platform Support #

Android iOS Web Linux macOS Windows
✔ ✔ ✔ ✔ ✔ ✔

Installation #

  1. Add following dependency in pubspec.yaml file.
flutter pub add select2dot1
  1. Add this import to your file.
import 'package:select2dot1/select2dot1.dart';
  1. Now you can use Select2dot1 widget. Go to Usage section and see how to use it.

Usage #

  1. On the first step you need to create a list of data that you want to display in.
static const List<SingleCategoryModel> exampleData = [
    SingleCategoryModel(
      nameCategory: 'Team Leader',
      singleItemCategoryList: [
        SingleItemCategoryModel(
          nameSingleItem: 'David Eubanks',
          extraInfoSingleItem: 'Full time',
          avatarSingleItem: CircleAvatar(
            backgroundColor: Colors.transparent,
            foregroundColor: Colors.transparent,
            backgroundImage: AssetImage('assets/images/avatar1.jpg'),
          ),
        ),
        SingleItemCategoryModel(
          nameSingleItem: 'Stuart Resch',
          extraInfoSingleItem: 'Part time',
          avatarSingleItem: CircleAvatar(
            backgroundColor: Colors.blue,
            child: Text('SR', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    ),
  ];
  1. Use Select2dot1 widget and pass your data to it. You can also pass scrollController if you want to use it.
Select2dot1(
    selectDataController: SelectDataController(data: exampleData),
    scrollController: scrollController,
),

Features #

Scroll Controller #

ScrollController is used to control anchor position of dropdown menu. You can pass your own ScrollController to Select2dot1 widget.

Fully Customizable #

All components of Select2dot1 are fully customizable by settings and builder. If you want to change something that is not available in settings, let's make yor own component by builder. Check Customization section for more information.

Components and Settings #

Components View #

In this section you can see how components of Select2dot1 widget look like and see hierarchy. You can also see how to customize them by settings and builder. For more details hierarchy of components , go to Tree View Components with Settings section.

Component Pillbox Configuration 1

  1. Pillbox
  2. PillboxTitle
  3. PillboxContent
  4. PillboxContentMulti / PillboxContentSingle
  5. SelectEmptyInfo
  6. PillboxIcon

Component Pillbox Configuration 2

  1. Pillbox
  2. PillboxTitle
  3. PillboxContent
  4. PillboxContentMulti
  5. SelectChip
  6. PillboxIcon

Component Pillbox Configuration 3

  1. Pillbox
  2. PillboxTitle
  3. PillboxContent
  4. PillboxContentMulti
  5. SelectOverloadInfo
  6. PillboxIcon

Component Pillbox Configuration 4

  1. Pillbox
  2. PillboxTitle
  3. PillboxContent
  4. PillboxContentSingle
  5. SelectSingle
  6. PillboxIcon

Component Dropdown Overlay Configuration 1

  1. DropdownOverlay, DropdownContentOverlay
  2. SearchBarOverlay
  3. ListDataViewOverlay
  4. CategoryNameOverlay
  5. CategoryItemOverlay

Component Dropdown Overlay Configuration 2

  1. DropdownOverlay, DropdownContentOverlay
  2. SearchBarOverlay
  3. SearchEmptyOverlay

Component Dropdown Modal Configuration 1

  1. showModalBottomSheet, DropdownModal, DropdownContentModal
  2. TitleModal
  3. ButtonModal
  4. SearchBarModal
  5. ListDataViewModal
  6. CategoryNameModal
  7. CategoryItemModal

Component Dropdown Modal Configuration 2

  1. showModalBottomSheet, DropdownModal, DropdownContentModal
  2. TitleModal
  3. ButtonModal
  4. SearchBarModal
  5. SearchEmptyModal

Tree View Components with Settings #

You can see TreeView components with settings there. Tree View was created by Miro. If you want customize components of Select2dot1 widget, you can use Tree View to see all components and settings. The most helpful site - You must see it.

Customization #

If you want to customize Select2dot1 widget you can do it by settings and builder. First try to use settings to customize, if you can't find what you need, use builder.

By Settings #

Use global settings to customize all components of Select2dot1 widget

You can pass global settings to Select2dot1 widget. Global settings will be used by all components of Select2dot1 widget.

In this example we will customize mainColor and fontFamily for all components of Select2dot1 widget.

Select2dot1(
  selectDataController: SelectDataController(data: exampleData),
  globalSettings: const GlobalSettings(
    fontFamily: 'Roboto',
    mainColor: Colors.blue,
  ),
);

Use single component settings to customize only one component of Select2dot1 widget

You can pass single component settings to Select2dot1 widget. Single component settings will be used only by one component of Select2dot1 widget.

In this example we will customize only CategoryNameOverlay component and CategoryItemOverlay component in Dropdown (change visible only on desktop overlay).

Select2dot1(
  selectDataController: SelectDataController(data: exampleData),
  categoryNameOverlaySettings: CategoryNameOverlaySettings(
    constraints: const BoxConstraints(minHeight: 27),
    textStyle: const TextStyle(
      color: Color(0xFF6B7893),
      fontSize: 14,
      fontWeight: FontWeight.w500,
     ),
    defaultDecoration: const BoxDecoration(color: Colors.transparent),
    hoverDecoration:
        BoxDecoration(color: const Color(0xFF00183D).withOpacity(0.5)),
  ),
  categoryItemOverlaySettings: CategoryItemOverlaySettings(
    constraints: const BoxConstraints(minHeight: 35),
    defaultTextStyle: const TextStyle(
      color: Colors.white,
      fontSize: 14,
      fontWeight: FontWeight.w500,
    ),
    selectedTextStyle: const TextStyle(
      color: Color(0xFF1DEDB2),
      fontSize: 14,
      fontWeight: FontWeight.w500,
    ),
    iconSize: 14,
    iconSelectedColor: const Color(0xFF1DEDB2),
    defaultDecoration: const BoxDecoration(color: Colors.transparent),
    hoverDecoration:
        BoxDecoration(color: const Color(0xFF00183D).withOpacity(0.5)),
    showExtraInfo: extraInfoInDropdown,
  ),
);

By Builder #

In builder you can customize all components of Select2dot1 widget. You can use your own components or use default components that are available in Select2dot1 widget.

Create your completly own component

You can create your own component by using Select2dot1Builder class. You have to pass your own component to Select2dot1Builder class and then pass this class to Select2dot1 widget. In builder you have access to all data that you need to create your own component.

Select2dot1(
    selectDataController: SelectDataController(data: exampleData),
    selectChipBuilder: (context, selectChipDetails) {
          return Container(
            height: 29,
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
            constraints: const BoxConstraints(maxWidth: 200),
            decoration: BoxDecoration(
              color: const Color(0xFF001029),
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: Colors.white),
            ),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Flexible(
                  child: Text(
                    selectChipDetails.singleItemCategory.getNameSingleItem,
                    softWrap: false,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 1.0, left: 2.0),
                  child: MouseRegion(
                    cursor: SystemMouseCursors.click,
                    child: GestureDetector(
                      onTap: () {
                        selectChipDetails.selectDataController
                            .removeSingleSelectedChip(
                          selectChipDetails.singleItemCategory,
                        );
                      },
                      child: const Icon(
                        Icons.clear,
                        color: Colors.white,
                        size: 14,
                      ),
                    ),
                  ),
                )
              ],
            ),
          );
        },
    ),

Use default components

If you want change layout of component which includes a lot of other components, you can use default components that are available in Select2dot1 widget. You can use them by passing them to Select2dot1Builder class. Remember that when using this builder, you must ensure the correctness of the written code yourself.

Select2dot1(
  selectDataController: SelectDataController(data: exampleData),
  pillboxTitleSettings:
      const PillboxTitleSettings(title: 'Example use builder'),
  pillboxBuilder: (context, pillboxDetails) => Material(
    color: Colors.transparent,
    child: InkWell(
      onTap: pillboxDetails.showDropdown,
      mouseCursor: SystemMouseCursors.click,
      onHover: (hoverState) => mounted
          ? setState(() => pillboxDetails.hover = hoverState)
          : null,
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      hoverColor: Colors.transparent,
      focusColor: Colors.transparent,
      child: Row( // In this builder I changed layout of pillbox (Column to Row)
        mainAxisSize: MainAxisSize.min,
        children: [
          pillboxDetails.pillboxTitle(),
          const SizedBox(width: 8),
          Expanded(child: pillboxDetails.pillboxContent()),
        ],
      ),
    ),
  ),
);

Model Structur Data #

To use Select2dot1 widget you have to pass data to SelectDataController. Data must be in list of SingleCategoryModel.

SingleCategoryModel is a model which contains data about single category. Parameters:

  • nameCategory - name of category (It is optional if you don't want to show group select)
  • singleItemCategoryList - list of SingleItemCategoryModel (It is required)

SingleItemCategoryModel is a model which contains data about single item in category. Parameters:

  • nameSingleItem - visible name of single item (It is required)
  • value - value of single item (It is optional)
  • extraInfoSingleItem - extra info about single item (It is optional)
  • avatarSingleItem - avatar of single item (It is optional)

Value parametr in SingleItemCategoryModel #

It used to get specific id of single item. It's necessary when you want to distinguish between single items with the same nameSingleItem.

static const List<SingleCategoryModel> exampleData = [
  SingleCategoryModel(
    singleItemCategoryList: [
      SingleItemCategoryModel(nameSingleItem: 'Alabama', value: 'Alabama1'),
      SingleItemCategoryModel(nameSingleItem: 'Alabama', value: 'Alabama2'),
      SingleItemCategoryModel(nameSingleItem: 'Arkansas'),
      SingleItemCategoryModel(nameSingleItem: 'Illonois'),
    ],
  ),
];

Example data #

static const List<SingleCategoryModel> exampleData = [
    SingleCategoryModel(
      nameCategory: 'Team Leader',
      singleItemCategoryList: [
        SingleItemCategoryModel(
          nameSingleItem: 'David Eubanks',
          extraInfoSingleItem: 'Full time',
          avatarSingleItem: CircleAvatar(
            backgroundColor: Colors.transparent,
            foregroundColor: Colors.transparent,
            backgroundImage: AssetImage('assets/images/avatar1.jpg'),
          ),
        ),
        SingleItemCategoryModel(
          nameSingleItem: 'Stuart Resch',
          extraInfoSingleItem: 'Part time',
          avatarSingleItem: CircleAvatar(
            backgroundColor: Colors.blue,
            child: Text('SR', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    ),
    SingleCategoryModel(
      nameCategory: 'UX Designer',
      singleItemCategoryList: [
        SingleItemCategoryModel(
          nameSingleItem: 'Jan Foxstein',
          extraInfoSingleItem: 'Full time',
        ),
        SingleItemCategoryModel(
          nameSingleItem: 'Jhony Steward',
          extraInfoSingleItem: 'Part time',
          avatarSingleItem: CircleAvatar(
            backgroundColor: Colors.blue,
            child: Text('JS', style: TextStyle(color: Colors.white)),
          ),
        ),
      ],
    ),
  ];

Controllers #

SelectDataController #

SelectDataController is a controller that is used to manage data in Select2dot1 widget. You can use it to add, remove, select and deselect data. All data that you want to display in Select2dot1 widget must be added to SelectDataController. Remember that when isMultiple is false, you can add only one position to initialSelectedData.

In SelectDataController you can also set:

  • inital selected data
  • is multiple select or single select
Select2dot1(
  selectDataController: 
    SelectDataController(
      data: exampleData, 
      isMultiple: false, 
      initialSelectedData: [ // Remember that when isMultiple is false, you can add only one position to initialSelectedData.
        SingleItemCategoryModel(
          nameSingleItem: 'Stuart Resch',
          value: 'Stuart Resch 1', 
        ),
      ],
    ),
);

Contributing #

Pull requests (pull request template is available) are welcome. For major changes, please open an issue first to discuss what you would like to change. More information about contributing you can find here. Remember to follow the code of conduct.

Issues #

If you find any issues (bug, feature, performance or other), please report them here.

Please do not ask questions in the issue tracker. Use Q&A section instead.

Please do not report security vulnerabilities on the public issue tracker. The SECURITY page details the procedure for disclosing security issues.

Security #

If you discover any security related issues, please go to SECURITY page.

Contributors #

  • Roman Dykyj (@romanjrdykyj)

QA #

If you have any questions, feel free to ask them here.

FAQ #

How to get selected item? #

Use 'onChanged' Callback Function

You can pass callback function to Select2dot1 widget. This function will be called every time when user select an item.

Select2dot1(
    selectDataController: SelectDataController(data: exampleData),
    onChanged: (value) {
        print(value); // value is a list of selected items
    },
),

How to init selected data? #

Select2dot1(
    selectDataController: SelectDataController(data: exampleData, 
    initialSelectedData: [
        SingleItemCategoryModel(
          nameSingleItem: 'Alabama',
        ),
        SingleItemCategoryModel(
          nameSingleItem: 'California',
        ),
      ],
    ),
),

How to used only overlay or modal mode on all platforms? #

It is not possible to use only overlay or modal mode on all platforms. It is automatically set by the package. Overlay mode is used on desktop and modal mode is used on mobile.

How to set NO group select? #

If you dont want to group select, you dont need to use name parameter in SingleCategoryModel.

static const List<SingleCategoryModel> exampleData3 = [
  SingleCategoryModel(
    nameCategory: null, // If you dont want to group select, you dont need to use name parameter in SingleCategoryModel or set it to null.
    singleItemCategoryList: [
      SingleItemCategoryModel(nameSingleItem: 'Alabama',),
      SingleItemCategoryModel(nameSingleItem: 'Arkansas'),
      SingleItemCategoryModel(nameSingleItem: 'Illonois'),
    ],
  ),
];

License #

This package is licensed under the MIT license. To see the full license text, see the LICENSE file.

← Metadata

45
likes
0
pub points
82%
popularity

Publisher

verified publisherromanjrdykyj.site

Metadata

Select2dot1 give you a fully customizable single/multiple select box with support for searching, group option, extra info and avatar. Works using overlay and modal.

Homepage
Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

flutter

More

Packages that depend on select2dot1

Back