FlekSelect #

A customizable Flutter select widget with flexible overlay options and tree-shakable exports. Extracted from dredge_ui as part of a modular package restructuring.

Features #

• Flexible Overlay System: Custom callback for showing select options dialog
• Tree-Shakable: Import only what you need
• Highly Customizable: Custom builders for options and values
• Responsive Touch: Uses Tappable package for better touch feedback
• Rich Options: Labels, hints, errors, disabled states, and more

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flek_select:
    path: ../flek_select

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:flek_select/select.dart';
import 'package:flek_select/select_option.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Select(
      options: [
        SelectOption(text: 'Option 1', value: '1'),
        SelectOption(text: 'Option 2', value: '2'),
        SelectOption(text: 'Option 3', value: '3'),
      ],
      value: selectedValue,
      onChange: (value) {
        setState(() {
          selectedValue = value;
        });
      },
    );
  }
}

With Label and Error #

Select(
  inputLabel: 'Choose an option',
  isRequired: true,
  error: isValid ? null : 'Please select an option',
  options: myOptions,
  value: selectedValue,
  onChange: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

Custom Overlay (Using a different overlay package) #

Select(
  options: myOptions,
  value: selectedValue,
  onChange: (value) {
    setState(() {
      selectedValue = value;
    });
  },
  showOverlay: (context, dialogContent) async {
    // Use your own overlay package here
    // For example, using a custom positioned overlay:
    await showCustomOverlay(context, dialogContent);
  },
)

Custom Builders #

Select(
  options: myOptions,
  value: selectedValue,
  onChange: (value) => setState(() => selectedValue = value),
  optionBuilder: (context, option) {
    return Row(
      children: [
        Icon(Icons.star),
        SizedBox(width: 8),
        Text(option.text),
      ],
    );
  },
  valueBuilder: (context, option, isDisabled) {
    return Text(
      option?.text ?? 'Select...',
      style: TextStyle(
        color: isDisabled ? Colors.grey : Colors.black,
        fontWeight: FontWeight.bold,
      ),
    );
  },
)

With "Not Selected" Option #

Select(
  options: myOptions,
  value: selectedValue,
  onChange: (value) => setState(() => selectedValue = value),
  showNotSelectedOption: true,
  notSelectedOptionText: 'None',
)

API Reference #

Select Widget #

SelectOption Model #

Tree-Shaking #

Import only what you need:

// Import only Select widget
import 'package:flek_select/select.dart';

// Import only SelectOption model
import 'package:flek_select/select_option.dart';

This ensures unused code is not included in your app bundle.

License #

MIT License