flutter_picker_plus 1.5.2 copy "flutter_picker_plus: ^1.5.2" to clipboard
flutter_picker_plus: ^1.5.2 copied to clipboard

Provide flexible parameters to meet various needs with NumberPicker, DateTimePicker, ArrayPicker, and default linkage Picker.

flutter_picker_plus #

pub package License

A powerful and customizable picker widget for Flutter applications. Continuation of the popular flutter_picker package with enhanced features and modern Flutter support.

Picker Demo

✨ Features #

  • 🎯 Multiple Picker Types: Number, DateTime, Array, and custom data pickers
  • 🌐 Internationalization: Support for 20+ languages including RTL languages
  • 🎨 Highly Customizable: Flexible styling, colors, and layouts
  • 🔗 Linkage Support: Create dependent picker columns
  • 📱 Multiple Display Modes: Modal, dialog, and embedded pickers
  • 🎭 Custom Adapters: Extend functionality with your own data adapters
  • 🛡️ Null Safety: Full null safety support
  • Performance Optimized: Handles large datasets efficiently

🚀 Installation #

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

dependencies:
  flutter_picker_plus: ^1.5.2

🌍 Supported Languages #

Arabic • Bengali • Chinese • English • French • German • Greek • Hindi • Indonesian • Italian • Japanese • Korean • Portuguese • Romanian • Russian • Spanish • Turkish • Urdu • Javanese • Vietnamese • Slovenian

Supporting 20+ languages including the most widely spoken languages worldwide.

📖 Quick Start #

Basic String Picker #

import 'package:flutter_picker_plus/flutter_picker_plus.dart';

void showBasicPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(
      pickerData: ['Option 1', 'Option 2', 'Option 3']
    ),
    title: const Text('Select an Option'),
    onConfirm: (Picker picker, List<int> value) {
      print('Selected: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

Number Picker #

void showNumberPicker(BuildContext context) {
  Picker(
    adapter: NumberPickerAdapter(data: [
      const NumberPickerColumn(begin: 0, end: 100, jump: 5),
      const NumberPickerColumn(begin: 0, end: 60),
    ]),
    delimiter: [
      PickerDelimiter(
        child: Container(
          width: 30.0,
          alignment: Alignment.center,
          child: const Text(':'),
        ),
        column: 1,
      ),
    ],
    title: const Text('Select Time'),
    onConfirm: (Picker picker, List<int> value) {
      print('Selected: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

Date Time Picker #

void showDateTimePicker(BuildContext context) {
  Picker(
    adapter: DateTimePickerAdapter(
      type: PickerDateTimeType.kYMDHM,
      value: DateTime.now(),
      minValue: DateTime(1950),
      maxValue: DateTime(2050),
    ),
    title: const Text('Select Date & Time'),
    onConfirm: (Picker picker, List<int> value) {
      final dateTime = (picker.adapter as DateTimePickerAdapter).value;
      print('Selected: $dateTime');
    },
  ).showModal(context);
}

🎛️ Advanced Usage #

Multi-Column Array Picker #

void showArrayPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(
      pickerData: [
        ['Morning', 'Afternoon', 'Evening'],
        ['Coffee', 'Tea', 'Juice'],
        ['Small', 'Medium', 'Large'],
      ],
      isArray: true,
    ),
    title: const Text('Customize Your Order'),
    onConfirm: (Picker picker, List<int> value) {
      print('Selected: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

Hierarchical (Linkage) Picker #

void showLinkagePicker(BuildContext context) {
  final data = {
    'Fruits': {
      'Citrus': ['Orange', 'Lemon', 'Lime'],
      'Berries': ['Strawberry', 'Blueberry', 'Raspberry'],
    },
    'Vegetables': {
      'Root': ['Carrot', 'Potato', 'Onion'],
      'Leafy': ['Lettuce', 'Spinach', 'Kale'],
    },
  };

  Picker(
    adapter: PickerDataAdapter<String>(pickerData: [data]),
    title: const Text('Select Food Category'),
    onConfirm: (Picker picker, List<int> value) {
      print('Selected: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

Custom Styling #

void showStyledPicker(BuildContext context) {
  Picker(
    adapter: PickerDataAdapter<String>(
      pickerData: ['Red', 'Green', 'Blue', 'Yellow'],
    ),
    backgroundColor: Colors.grey.shade100,
    headerColor: Colors.blue,
    containerColor: Colors.white,
    textStyle: const TextStyle(color: Colors.black87, fontSize: 18),
    cancelTextStyle: const TextStyle(color: Colors.red),
    confirmTextStyle: const TextStyle(color: Colors.blue),
    itemExtent: 50.0,
    diameterRatio: 2.0,
    title: const Text('Pick a Color'),
    onConfirm: (Picker picker, List<int> value) {
      print('Selected: ${picker.getSelectedValues()}');
    },
  ).showModal(context);
}

🔧 API Reference #

Picker Class #

Property Type Description
adapter PickerAdapter Data adapter for the picker
title Widget? Title widget displayed at the top
cancelText String? Cancel button text (default: localized)
confirmText String? Confirm button text (default: localized)
backgroundColor Color? Background color of the picker
headerColor Color? Header background color
textStyle TextStyle? Style for picker items
hideHeader bool Hide the header buttons (default: false)
delimiter List<PickerDelimiter>? Delimiters between columns

Available Adapters #

  • PickerDataAdapter: For string/custom data
  • NumberPickerAdapter: For numeric ranges
  • DateTimePickerAdapter: For date and time selection

Display Methods #

  • showModal(context): Show as modal bottom sheet
  • showDialog(context): Show as dialog
  • show(state): Show with custom state (deprecated)
  • makePicker(): Return picker widget for embedding

🎨 Customization Options #

Localization #

The picker automatically adapts to your app's locale. You can also register custom languages:

PickerLocalizations.registerCustomLanguage(
  'custom',
  cancelText: 'Cancel',
  confirmText: 'OK',
  ampm: ['AM', 'PM'],
  months: ['Jan', 'Feb', 'Mar', /* ... */],
);

Custom Item Builder #

Picker(
  adapter: adapter,
  itemBuilder: (context, text, child, selected, column, index) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      decoration: BoxDecoration(
        color: selected ? Colors.blue.shade100 : null,
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: child,
    );
  },
  // ... other properties
)

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License #

This project is licensed under the BSD-3-Clause License - see the LICENSE file for details.

🙏 Acknowledgments #

This package is a continuation of the original flutter_picker package with additional features and improvements.


For more examples and detailed documentation, check out the example app.

48
likes
150
points
13.4k
downloads

Publisher

verified publisheroctologs.com

Weekly Downloads

Provide flexible parameters to meet various needs with NumberPicker, DateTimePicker, ArrayPicker, and default linkage Picker.

Repository (GitHub)

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on flutter_picker_plus