flutter_picker_view 1.1.0

A Flutter picker view like iOS UIPickerView support multiple pickers

flutter_picker_view

A Flutter picker view like iOS UIPickerView support multiple pickers

Getting Started

First, add flutter_picker_view as a dependency in your pubspec.yaml file.

Demo

Example

import 'package:flutter_picker_view/flutter_picker_view.dart';

enum PickerShowMode {
    AlertDialog,
    BottomSheet
}

AlertDialog

BottomSheet

void _showPicker() {
    PickerController pickerController = PickerController(count: 3, selectedItems: [5,2,1]);
    
    PickerViewPopup.showMode(
        PickerShowMode.AlertDialog, // AlertDialog or BottomSheet
        controller: pickerController,
        context: context,
        title: Text('AlertDialogPicker',style: TextStyle(fontSize: 14),),
        cancel: Text('cancel', style: TextStyle(color: Colors.grey),),
        onCancel: () {
            Scaffold.of(context).showSnackBar(
                SnackBar(content: Text('AlertDialogPicker.cancel'))
            );
        },
        confirm: Text('confirm', style: TextStyle(color: Colors.blue),),
        onConfirm: (controller) {
            List<int> selectedItems = [];
            selectedItems.add(controller.selectedRowAt(section: 0));
            selectedItems.add(controller.selectedRowAt(section: 1));
            selectedItems.add(controller.selectedRowAt(section: 2));

            Scaffold.of(context).showSnackBar(
                SnackBar(content: Text('AlertDialogPicker.selected:$selectedItems'))
            );
        },
        builder: (context, popup) {
            return Container(
                height: 150,
                child: popup,
            );
        },
        itemExtent: 40,
        numberofRowsAtSection: (section) {
            return 10;
        },
        itemBuilder: (section, row) {
            return Text('$row',style: TextStyle(fontSize: 12),);
        }
    );
}

Custom PickerView

PickerController controller = PickerController(count: 2);

PickerView(
    itemExtent: 40,
    numberofRowsAtSection: (section) {
        return 10;
    },
    itemBuilder: (section, row) {
        if (0 == section) {
            return Padding(
                padding: EdgeInsets.only(left: 20),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('$row',style: TextStyle(fontSize: 14),),
                        Icon(Icons.face)
                    ],
                ),
            );
        } else {
            return Padding(
                padding: EdgeInsets.only(right: 20),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Text('$row',style: TextStyle(fontSize: 14),),
                        Icon(Icons.thumb_up)
                    ],
                )
            );
        }
    },
    controller: controller
)