in ,

A simple grid that supports both dragging and tapping to select its items


This is a grid that supports both dragging and tapping to select its items

drag grid

Basic usage

First of all, DragSelectGridView constructor is very similar to GridView.builder, so you should take your time to understand the latter before diving into this library.

Once you are familiar with GridView.builder, probably the only additional piece of information you’ll need is DragSelectGridViewController. With it, you’re able to know which indexes are selected.

Check this example:

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

class _MyAppState extends State<MyApp> {
  final controller = DragSelectGridViewController();

  void initState() {

  void dispose() {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SelectionAppBar(
        selection: controller.selection,
      body: DragSelectGridView(
        gridController: controller,
        itemCount: 20,
        itemBuilder: (context, index, selected) {
          return SelectableItem(
            index: index,
            selected: selected,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 80,

  void scheduleRebuild() => setState(() {});

As you may have noticed in the code above, DragSelectGridView must be used along two other widgets in order to provide a proper user experience. In the example, they are:

  • SelectableItem: A selectable widget, which is going to visually indicate whether the item is selected or not.
  • SelectionAppBar: A custom AppBar, which shows the amount of selected items and an option to unselect them.

Some examples of widgets can be found in the example project . I won’t add them to the library because they are unrelated to the grid itself. But you can still copy them into your project. It feels free, as long as you abide by the conditions of the license terms.

Advanced usage

You can use the setter DragSelectGridViewController.selection to directly change the selection (I’m not quite sure why you’d need this, but I don’t ask questions).

It allows this sort of interaction:


You can check the code here.

There are some other minor settings you can do to make DragSelectGridView fit your needs, like DragSelectGridView.autoScrollHotspotHeight and DragSelectGridView.unselectOnWillPop. Those features are well documented, so I’ll let you take your discovery time.

Ultimately, we completely hope this is everything you need to know to use this library.


Written by James

A simple but problematic layout example

A Flutter plugin for manipulating Android WindowManager LayoutParams