Explore Multi-Select Items In Flutter
Flutter widget is built using a modern framework. It is like a react. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state.
Flutter automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. A Flutter is a tool for developing mobile, desktop, web applications with code & is a free and open-source tool. Flutter has the ability to easily test any application. The ability is that they work the way we want them on a target platform. Dart testing works well for unit and non-UI testing; It runs on the development machine and does not depend on the GUI of the Flutter application.
In this blog, we will explore Multi-select items In Flutter. We will also implement a demo of the Multi-select items In Flutter. How to use them in your flutter applications. So let’s get started.
multi_select_item | Flutter Package
Multi-select view item controller for GridView and ListView in Flutter For this to work. You need to write First define…pub.dev
Table Of Contents :
Multi-Select Item:
Multi-select Items This is a flutter library that handles multiple selections Using this library we create a list when we can delete the item of this list using this widget we wrap it inside the listview builder item So that we can easily create a multi-select list.
Implementation:
You need to implement it in your code respectively :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
First, we will add flutter_localization and intl library to pubspec. yaml.
dependencies:
multi_select_item: ^1.0.3Step 2: import the package :
import 'package:multi_select_item/multi_select_item.dart';Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueCode Implementation:
For this to work. You need to write First define the controller first.
MultiSelectController controller = new MultiSelectController();After this, we have created a list that defines its value inside initState() and after that set length of the controller by list length. the reference to the code below is included.
@override
void initState() {
super.initState();
multiSelectList.add({"images": 'assets/images/resort_1.jpg', "desc":"Welcome to New York City!"});
multiSelectList.add({"images":'assets/images/resort_2.jpg' ,"desc":"Welcome to Los Angeles!"});
multiSelectList.add({"images":'assets/images/resort_3.jpg' ,"desc":"Welcome to Chicago!"});
multiSelectList.add({"images":'assets/images/resort_4.jpg', "desc":"Welcome to Houston!"});
controller.disableEditingWhenNoneSelected = true;
controller.set(multiSelectList.length);
}Like after this we have taken a ListViewBuilder widget inside which we have taken MultiSelectItem() widget in which we have taken the card and in its child property, we have taken row widget in which we initialize above-defined list value which has an image and text and list on its onSelected() The controller is defined inside setState to select of the value.
ListView.builder(
itemCount: multiSelectList.length,
itemBuilder: (context, index) {
return MultiSelectItem(
isSelecting: controller.isSelecting,
onSelected: () {
setState(() {
controller.toggle(index);
});
},
child:Container(
height:75,
margin: EdgeInsets.only(left:15,right:15,top:15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
),
child:Card(
color:controller.isSelected(index)
? Colors.grey.shade200:Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child:Padding(
padding:EdgeInsets.symmetric(vertical:10, horizontal: 12),
child: Row(
children: [
//contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
ClipRRect(
borderRadius: BorderRadius.circular(12),
child:Image.asset(multiSelectList[index]['images'],fit:BoxFit.cover,width:60,height:60,),
),
SizedBox(width:20,),
Text(multiSelectList[index]['desc'], style: TextStyle(fontSize:14)),
],
),
),
),
),
);
},
),After that we will remove the selected item to remove this we take forEach and sort the value in it which will sort our select item first from biggest id to smallest id and then it will remove it one by one.
void delete() {
var list = controller.selectedIndexes;
list.sort((b, a) =>
a.compareTo(b));
list.forEach((element) {
multiSelectList.removeAt(element);
});
setState(() {
controller.set(multiSelectList.length);
});
}Code File :
import 'package:multi_select_item/multi_select_item.dart';
import 'package:flutter/material.dart';
class MultiSelectListDemo extends StatefulWidget {
@override
_MultiSelectListDemoState createState() => new _MultiSelectListDemoState();
}
class _MultiSelectListDemoState extends State<MultiSelectListDemo> {
List multiSelectList = [];
MultiSelectController controller = new MultiSelectController();
@override
void initState() {
super.initState();
multiSelectList.add({"images": 'assets/images/resort_1.jpg', "desc":"Welcome to New York City!"});
multiSelectList.add({"images":'assets/images/resort_2.jpg' ,"desc":"Welcome to Los Angeles!"});
multiSelectList.add({"images":'assets/images/resort_3.jpg' ,"desc":"Welcome to Chicago!"});
multiSelectList.add({"images":'assets/images/resort_4.jpg', "desc":"Welcome to Houston!"});
multiSelectList.add({"images":'assets/images/sanfrancisco.jpg', "desc":"Welcome to San francisco!"});
controller.disableEditingWhenNoneSelected = true;
controller.set(multiSelectList.length);
}
void add() {
multiSelectList.add({"images": multiSelectList.length});
multiSelectList.add({"desc": multiSelectList.length});
setState(() {
controller.set(multiSelectList.length);
});
}
void delete() {
var list = controller.selectedIndexes;
list.sort((b, a) =>
a.compareTo(b));
list.forEach((element) {
multiSelectList.removeAt(element);
});
setState(() {
controller.set(multiSelectList.length);
});
}
void selectAll() {
setState(() {
controller.toggleAll();
});
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
var before = !controller.isSelecting;
setState(() {
controller.deselectAll();
});
return before;
},
child: new Scaffold(
appBar: new AppBar(
title: new Text('Selected ${controller.selectedIndexes.length}' ),
actions: (controller.isSelecting)
? <Widget>[
IconButton(
icon: Icon(Icons.select_all),
onPressed: selectAll,
),
IconButton(
icon: Icon(Icons.delete),
onPressed: delete,
)
]
: <Widget>[],
),
body:Container(
child: ListView.builder(
itemCount: multiSelectList.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: MultiSelectItem(
isSelecting: controller.isSelecting,
onSelected: () {
setState(() {
controller.toggle(index);
});
},
child:Container(
height:75,
margin: EdgeInsets.only(left:15,right:15,top:15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.transparent,
),
child:Card(
color:controller.isSelected(index)
? Colors.grey.shade200:Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child:Padding(
padding:EdgeInsets.symmetric(vertical:10, horizontal: 12),
child: Row(
children: [
//contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
ClipRRect(
borderRadius: BorderRadius.circular(12),
child:Image.asset(multiSelectList[index]['images'],fit:BoxFit.cover,width:60,height:60,),
),
SizedBox(width:20,),
Text(multiSelectList[index]['desc'], style: TextStyle(fontSize:14)),
],
),
),
),
),
),
);
},
),
),
),
);
}
}Conclusion :
In this article, I have explained Explore GetIt In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Explore GetIt In Flutter demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Explore GetIt In Flutter in your flutter project. We showed you what the Explore GetIt In Flutter is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
