i may not be able to explain properly..
i have created a list using List.generate(9,(index) =>Container()
in this list of 9 listitems I want to particularly give a random color to 3 random items/containers of the list when i click on the container
GridView(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 2,
mainAxisSpacing: 2,
crossAxisCount: 3,
),
children: ListView(listLength, (index) {
final _isSelected = _clicked.contains(index);
return Center(
child: GestureDetector(
onTap: () {
setState(() {
if (_isSelected) {
_clicked.remove(index);
} else {
_clicked.add(in);
}
});
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInQuad,
decoration: BoxDecoration(
border: Border.all(
style: BorderStyle.solid, color: Colors.black),
color: _isSelected ? _color : Colors.white,
),
),
),
);
}),
),
Now in this i want to color each container with different color using Random() How can I do it?
CodePudding user response:
Full Widget
class Applicants extends StatefulWidget {
const Applicants({
Key? key,
}) : super(key: key);
@override
State<Applicants> createState() => _ApplicantsState();
}
class _ApplicantsState extends State<Applicants> {
Color _baseColor = Colors.blue;
int listLength = 9;
List<int> _luckyItems = [];
//* import import 'dart:math';
final Random random = Random();
get randomColor =>
Color((random.nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
randomColorContainerIndex() {
List<int> selected = [];
while (selected.length < 3) {
final i = random.nextInt(listLength);
if (!selected.contains(i)) selected.add(i);
}
return selected;
}
@override
Widget build(BuildContext context) {
return GridView(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 2,
mainAxisSpacing: 2,
crossAxisCount: 3,
),
children: [
...List.generate(listLength, (index) {
return Center(
child: InkWell(
onTap: () async {
print("item $index");
setState(() {
_luckyItems = randomColorContainerIndex();
});
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInQuad,
decoration: BoxDecoration(
border: Border.all(
style: BorderStyle.solid, color: Colors.black),
color:
_luckyItems.contains(index) ? randomColor : _baseColor,
),
),
),
);
}),
]);
}
}