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:
Similar Reads
Flutter - SelectableText Widget
Many times you need to select or copy some text like when you are on a web browser it allows us to select or copy any of the text without any issue but on mobile applications, it is not possible. So at times, you need to manually copy or enter such texts. But in the Flutter, with the help of the Sel
3 min read
Flutter - Tabs
Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To
2 min read
Flutter - Search Bar
The search bar is a basic UI element provided by each and every application or website we use to search for the content we need. The basic search bar can be created easily but the one we are going to make will search for elements based on an entered substring in real-time. Let's see how to create th
6 min read
Flutter - Toggle Buttons
A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. A sample video is given below to get an idea about what we are going to do in this article.Demo Video:SyntaxList Of Booleans to Know Which Selected:3
4 min read
Flutter - Custom Tab Bar
In this article, we will see about the Custom Tab Ba, and also how you can create the tab bar inside the tab bar. Making the tab bar is very easy you just go and return the default controller and give the length and Make the tab bar, But In this article, we will see how you can create the tab bar an
5 min read
Flutter - Checkbox Widget
Checkbox in Flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain its own state. We can use its onChanged property to interact with or modify other widgets in the Flutter app. Like most of the other flutter widgets, it also comes with many properties l
4 min read
Flutter - initState()
There are two types of widgets provided in Flutter. The Stateless WidgetThe Stateful Widget As the name suggests Stateful Widgets are made up of some 'States'. The initState() is a method that is called when an object for your stateful widget is created and inserted inside the widget tree. It is bas
4 min read
Flutter - Scrollable Text
In this article, we are going to make a Flutter application in which we will add a Text Widget that can be scrolled horizontally or vertically. These can have a wide range of applications depending upon the needs of the users. Here we will be implementing the simplest form of scrollable text. We can
3 min read
BLoC Pattern Flutter
In Flutter applications, the Flutter BLoC (Business Logic Component) is used to manage the state. It helps separate business logic from UI. It ensures that the user interface is not strongly liaison with the business logic, making the app more versatile. It is powerful since it allows the creation o
10 min read
Tab Page Selector Widget in Flutter
This article will teach about Tab Page Selector Widget in a flutter. What is Tab Page Selector Widget?TabPageSelector displays a row of small circular indicators, one per tab. Tabpageselector is a crucial part of the TabBar, which functions distinctly.   It plays a major role in increasing the user
4 min read