Flutter – Selectable Box

A selectable box is a box that can be selected with on click. If you are creating a list of boxes, And want these boxes can selectable. Then you can use the Selectable box widget. A sample video is given below to get an idea about what we are going to do in this article.

How to use it?

Just you have to add the dependency in the pub spec yaml file and also import the package for the same. Now you are ready to use this widget in your project.

Dart

SelectableBox(
          height: 250,
          width: 400,
          color: Colors.white,
          isSelectedColor: Colors.white,
          borderColor: Colors.grey,
          isSelectedBorderColor: Color.fromARGB(255, 18, 114, 21),
          borderWidth: 1,
          borderRadius: 10,
          padding: const EdgeInsets.all(8),
          animationDuration: const Duration(milliseconds: 200),
          opacity: 0.5,
          isSelectedOpacity: 1,
          checkboxAlignment: Alignment.topRight,
          checkboxPadding: const EdgeInsets.all(8),
          selectedIcon: const Icon(
           // icon
          ),
          unselectdIcon: const Icon(
           // icon
          ),
          showCheckbox: true,
          onTap: () {
            setState(() {
              isSelected = !isSelected;
            });
          },
          isSelected: isSelected,
            // child going to be anything
          child:
      ),

Step By Step Implementation

Step 1: Create a New Project in Android Studio or in VS code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the dependency into your pubspec yaml file

flutter pub add selectable_box

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get): 

Step 3: Import the package into the main file

Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.

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

void main() {
    runApp(RunMyApp());
}

Step 4: Creating Stateful Widget

Now we have to create a Stateful widget because our application does change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatefulWidget {
    const RunMyApp({super.key});
    @override
    State<RunMyApp> createState() => _RunMyAppState();
    }
    class _RunMyAppState extends State<RunMyApp> {
    @override
    Widget build(BuildContext context) {
      return MaterialApp();
    }
}

Step 5: Working with Scaffold

Scaffold enables us to set AppBar and body properties. of the AppBar. Further  AppBar allows us to give the title of AppBar, color, leading, and trailing icon.

home: Scaffold(
appBar: AppBar(
    title: Text('Selectable Box'),
),
body: 
),

Step 6: Now create the Selectable Box widget and assign its parameters like  –  height, width, color, isSelectedColor, borderColor, borderWidth, SelectedIcon, etc.,

Example

Dart

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

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  bool isSelected = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(appBar: AppBar(title: Text('Selectable Box'),),
       body:Center(
         child: SelectableBox(
          height: 250,
          width: 400,
          color: Colors.white,
          isSelectedColor: Colors.white,
          borderColor: Colors.grey,
          isSelectedBorderColor: Color.fromARGB(255, 18, 114, 21),
          borderWidth: 1,
          borderRadius: 10,
          padding: const EdgeInsets.all(8),
          animationDuration: const Duration(milliseconds: 200),
          opacity: 0.5,
          isSelectedOpacity: 1,
          checkboxAlignment: Alignment.topRight,
          checkboxPadding: const EdgeInsets.all(8),
          selectedIcon: const Icon(
            Icons.check_circle,
            color: Colors.green,
          ),
          unselectdIcon: const Icon(
            Icons.check_circle_outline,
            color: Colors.grey,
          ),
          showCheckbox: true,
          onTap: () {
            setState(() {
              isSelected = !isSelected;
            });
          },
          isSelected: isSelected,
          child: const Image(
            image: AssetImage('assets/gfglogo.png'),
            fit: BoxFit.cover,
          ),
      ),
       ),
      )
    );
  }
}

Output: