I have cards in my app and each card has 4 items with grey color, if the item is selected then its color change to blue and the same item in other cards should disable am unable to do that using maps collection. So I have items like IT, DEV, TEST, HR if IT is selected in any one of the cards then the remaining IT items in the remaining cards should disable.
I will attach the screenshots of the app and code below. Anyone can help me, please. Thanks in Advance.
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CardWithTextformfield(),
);
}
}
class CardWithTextformfield extends StatefulWidget {
const CardWithTextformfield({Key? key}) : super(key: key);
@override
_CardWithTextformfieldState createState() => _CardWithTextformfieldState();
}
class _CardWithTextformfieldState extends State<CardWithTextformfield> with AutomaticKeepAliveClientMixin {
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
var name =<TextEditingController>[];
var id =<TextEditingController>[];
var addCard =1;
void incrementcard(){
setState(() {
if(addCard >=4){
return;
}
addCard++;
});
}
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
appBar: AppBar(
title: Text('Card with TextformField'),
),
floatingActionButton: FloatingActionButton(
onPressed: incrementcard,
child: Icon(Icons.add),
),
body: Container(
child:ListView.builder(
itemCount: addCard,
itemBuilder: (context,index){
return cardslist(index);
}
),
),
);
}
Widget cardslist(int index){
if(name.length <= index){
name.add(TextEditingController());
id.add(TextEditingController());
}
return Card(
margin: EdgeInsets.all(10),
child: Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.all(10),
child: Text('Team Name: ')),
Expanded(child: TextFormField(
controller: name[index],
decoration: InputDecoration(hintText: 'Team Name'),
),),
Container(
margin: EdgeInsets.all(10),
child: Text('Team Id: '),),
Expanded(child: TextFormField(
controller: id[index],
decoration: InputDecoration(hintText: 'Team Id'),
),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
child: Container(
width: 50,height: 50,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey,
),
child: Center(child: Text('IT'),),
),
),
GestureDetector(
child: Container(
width: 50,height: 50,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey,
),
child: Center(child: Text('DEV'),),
),
),
GestureDetector(
child: Container(
width: 50,height: 50,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey,
),
child: Center(child: Text('TEST'),),
),
),
GestureDetector(
child: Container(
width: 50,height: 50,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey,
),
child: Center(child: Text('HR'),),
),
),
],
)
],
),
),
);
}
}
as what I understood is that, you want to compare the value from values inside
map
Declare a global -> bool variable
(final bool isSelected = false)
Store the value in a
variable
, which you want to compareUse forLoop to iterate the values in map
Check if the value exist, set
isSelected = true
Use
isSelected
to set the colorPlease check the post once for Map iteration - Add/Update list of K,V pair to empty declared map = List<Map<dynamic, dynamic>>
Hope it solves the issue