set limitation to select

[pishguy]

in this library how can i set limited selected items? for example user can't select more than 10 items?

[hcbpassos]

Such feature is not supported yet, but we can work around that by undoing any changes that lead to selecting above the limit. Please take this example:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  static const selectionLimit = 10;

  final controller = DragSelectGridViewController();
  Selection currentSelection;

  @override
  void initState() {
    super.initState();
    controller.addListener(handleSelectionChange);
  }

  @override
  void dispose() {
    controller.removeListener(handleSelectionChange);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SelectionAppBar(
        selection: controller.selection,
        title: const Text('Grid Example'),
      ),
      body: DragSelectGridView(
        gridController: controller,
        padding: const EdgeInsets.all(8),
        itemCount: 90,
        itemBuilder: (context, index, selected) {
          return SelectableItem(
            index: index,
            color: Colors.blue,
            selected: selected,
          );
        },
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 150,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
        ),
      ),
    );
  }

  void handleSelectionChange() {
    if (controller.selection.amount > selectionLimit) {
      setState(() => controller.selection = currentSelection);
    } else {
      setState(() {
        currentSelection = Selection(
          Set.of(controller.selection.selectedIndexes),
        );
      });
    }
  }
}

[Loopex2019]

You can set a maximum parameter to your Grid Widget like that :
GridWidget( maximum: 15, ).
By creating the selected item Widget ( which you can find in the example ) , you can
then add a bool named parameter , which checks if your selection list reached the maximum like that :

 SelectableItem(
            isMaximum: _selectedList.length == widget.maximum,
            whenSelcted: () { },
            whenUnselected: ()  { },
)

Then in the SelectableItem Widget you can check this condition in the didUpdateWidget method like that :

@override
void didUpdateWidget(SelectableItem oldWidget) {
 super.didUpdateWidget(oldWidget);
 if (oldWidget.selected != widget.selected) {
   if (widget.selected) {
     if (widget.isMaximum == false) {
       _controller.forward();
       widget.whenSelcted();
     } else {
       Fluttertoast.showToast(msg: 'You\'ve reached the maximum');
     }
   } else {
     _controller.reverse();
     widget.whenUnselected();
   }
 }
}

[pishguy]

@Loopex2019 could you reformat your code?

and GridWidget in library source? i should change that handly?

[Loopex2019]

No gridview is just an example. I mean it is the widget you created , which its build method return the DragSelectGridView widget

[ghost]

@Loopex2019 I appreciate your suggestion, but it is not correct. Not calling _controller.forward(); only avoids the selection animation, it doesn't make the item in fact unselected.

The only way to unselect an item is through DragSelectGridViewController.selection, as I suggested above :)

@MahdiPishguy Have you tried that?

[Loopex2019]

@hugocbpassos thanks for explaining to me . This actually worked for me. Because in the whenSelected() Method it adds the selected item into a list . So by checking the maximum it doesn't only prevent the controller from animating but also prevents the whenSelected() Method from being fired . But of course you are right since the selection itself doesn't change .

[ghost]

So by checking the maximum it doesn't only prevent the controller from animating but also prevents the whenSelected() Method from being fired .

The thing is, the item is already selected when State.didUpdateWidget() is called, so not firing whenSelected() won't actually help :)

By the way, those callbacks (whenSelected() and whenUnselected()) made me worry. DragSelectGridViewController should be able to handle selection by itself. There's no need to duplicate such logic.

Furthermore, for semantic purposes, the only information SelectableItem should receive is selected.

[Loopex2019]

@hugocbpassos don't worry it's just a callback when the item gets selected to add my custom logic for adding the selected items inside a List variable.

[ghost]

@Loopex2019 You should be doing that with DragSelectGridViewController.addListener().

[Loopex2019]

Ah okay thanks for clarifying

[pishguy]

@Loopex2019 I appreciate your suggestion, but it is not correct. Not calling _controller.forward(); only avoids the selection animation, it doesn't make the item in fact unselected.

The only way to unselect an item is through DragSelectGridViewController.selection, as I suggested above :)

@MahdiPishguy Have you tried that?

i test this source code which that is here #9 (comment)

its work fine :)