How do i create Multi Selection GridView in Flutter

Published November 07, 2021

In this Flutter GridView example we are creating simple multi selection GridView. Here we are creating a Statefull widget to show the list of courses inside GridView with multi selection option.

Here the GridView child items created using Stack widget with CheckBox and Text widget, checkbox widget will used to show the selection option.

We are adding a checkbox in the top to select all items inside GridView or deselect the items.

Let's get started

Step 1: Create Flutter application

Step 2: Create a class called Course to manage the selected state of the each GridView items

class Course{
String name;
bool selected;
  Course(this.name,this.selected);
}

Step 3: Create GridView and checkbox UI

Scaffold(body: SafeArea(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
  Checkbox(value: selectAll, onChanged: (bool? value){
    setState(() {
      selectAll=value!;
      corcess.forEach((element) {
        element.selected=value;
      });
    });

  }),
      GridView.builder(
        shrinkWrap: true,
        itemBuilder: (ctx,index){
        return prepareList(index);
      },
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount
          (crossAxisCount: 3),
        itemCount: corcess.length,
      ),
    ],
  ),
  ),

Step 4: Create GridView child items

Widget prepareList(int k)
{
  return Card(
    child: Hero(
      tag: "text$k",
      child: Material(
        child: InkWell(
          onTap: (){},
          child: Container(
            color: Colors.blueGrey,
            height: 100,
            child: Stack(
              children: [
                Center(child: Text(corcess[k].name,style: TextStyle(color: Colors.white,fontSize: 20),)),
                Positioned(child: Checkbox(value: corcess[k].selected, onChanged: (bool? value) {
                  setState(() {
                    if(!value!)
                      selectAll=false;
                    corcess[k].selected=value!;
                  });
                },))
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

Here we can update our UI as per requirement, here i just adding the Text of the course name

Step 5: Run application and you can see Multi Selection GridView items as output.

Multi Selection GridView flutter example

Complete code for Multi Selection GridView

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MultiSelectscreen extends StatefulWidget{
  @override
  _MultiSelectscreenState createState() => _MultiSelectscreenState();
}

class _MultiSelectscreenState extends State<MultiSelectscreen> {
  List<Course> corcess=new List.empty(growable: true);
  bool selectAll=false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    corcess.add(Course("Swift",false));
    corcess.add(Course("Angular",false));
    corcess.add(Course("BootStrap",false));
    corcess.add(Course("CSS",false));
    corcess.add(Course("Eclipse",false));
    corcess.add(Course("Fullstack Web",false));
    corcess.add(Course("JQuery",false));
    corcess.add(Course(".Net",false));
    corcess.add(Course("ADO .Net",false));
    corcess.add(Course("Phython",false));
    corcess.add(Course("Salesforece",false));
    corcess.add(Course("SpringBoot",false));
    corcess.add(Course("Tableu",false));
    corcess.add(Course("Docker",false));
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(body: SafeArea(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
      Checkbox(value: selectAll, onChanged: (bool? value){
        setState(() {
          selectAll=value!;
          corcess.forEach((element) {
            element.selected=value;
          });
        });

      }),
          GridView.builder(
            shrinkWrap: true,
            itemBuilder: (ctx,index){
            return prepareList(index);
          },
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount
              (crossAxisCount: 3),
            itemCount: corcess.length,
          ),
        ],
      ),
      ),
    );
  }

  Widget prepareList(int k)
  {
    return Card(
      child: Hero(
        tag: "text$k",
        child: Material(
          child: InkWell(
            onTap: (){},
            child: Container(
              color: Colors.blueGrey,
              height: 100,
              child: Stack(
                children: [
                  Center(child: Text(corcess[k].name,style: TextStyle(color: Colors.white,fontSize: 20),)),
                  Positioned(child: Checkbox(value: corcess[k].selected, onChanged: (bool? value) {
                    setState(() {
                      if(!value!)
                        selectAll=false;
                      corcess[k].selected=value!;
                    });
                  },))
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Course{
String name;
bool selected;
  Course(this.name,this.selected);
}

Article Contributed By :

3967 Views