Creating a Dynamic list of animated containers that can have different properties - flutter

Question

I am trying to implement this design where one chip is clickable at a time
Design Image
I tried multiple approaches like listview and grid view builders, but nothing gave me precisely what I was looking for. I eventually settled for the Wrap() widget with a list used to map Animated Container widgets, it gave me the look I wanted, but when I clicked on one chip, everything changes color instead of one like this.
How I can implement those grids of chips dynamically with the property of only one chip changing color at a time and from there be able to navigate to the next page. For more context, this is the code I used,
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:scree/constants.dart';
class SiteAbooutScreen extends StatefulWidget {
const SiteAbooutScreen({Key? key}) : super(key: key);
#override
_SiteAbooutScreenState createState() => _SiteAbooutScreenState();
}
class _SiteAbooutScreenState extends State<SiteAbooutScreen> {
bool _isTapped = false;
#override Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.only(left: 24, right: 24, top: 74.75),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 16,
runSpacing: 16,
children: _stuff
.map(
(strings) => GestureDetector(
onTap: () {
setState(() {
_isTapped = !_isTapped;
});
},
child: AnimatedContainer(
padding:
EdgeInsets.symmetric(horizontal: 24, vertical: 10),
duration: Duration(milliseconds: 200),
decoration: BoxDecoration(
color: _isTapped ? primary1 : Colors.transparent,
border: Border.all(color: Colors.black54),
borderRadius: BorderRadius.circular(100)),
child: Text(
strings,
style: Small.copyWith(
fontSize: 14,
color:
_isTapped ? Colors.white : Color(0xff929292)),
),
),
),
)
.toList(),
)
],
),
),
);
}
List<String> _stuff = [
'Portfolio',
'Art',
'Marketing',
'Education',
'Blog',
'Travel',
'Fashion',
'Beauty',
'Design',
'Online Store',
'Fitness',
'Food'
];
}

Answer 1

This is happening because you are using single bool to handle every item. That's why everything change at the same time. In order to handle one at a time, you need to check separately.
For this, you can create list of bool or String for selected items.
class SiteAbooutScreen extends StatefulWidget {
const SiteAbooutScreen({Key? key}) : super(key: key);
#override
_SiteAbooutScreenState createState() => _SiteAbooutScreenState();
}
class _SiteAbooutScreenState extends State<SiteAbooutScreen> {
List<String> tappedItems = [];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.only(left: 24, right: 24, top: 74.75),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 16,
runSpacing: 16,
children: _stuff
.map(
(strings) => GestureDetector(
onTap: () {
setState(() {
if (tappedItems.contains(strings)) {
tappedItems.remove(strings);
} else {
tappedItems.add(strings);
}
});
},
child: AnimatedContainer(
padding:
EdgeInsets.symmetric(horizontal: 24, vertical: 10),
duration: Duration(milliseconds: 200),
decoration: BoxDecoration(
color: tappedItems.contains(strings)
? Theme.of(context).primaryColor
: Colors.transparent,
border: Border.all(color: Colors.black54),
borderRadius: BorderRadius.circular(100)),
child: Text(
strings,
style: TextStyle(
fontSize: 14,
color: tappedItems.contains(strings)
? Colors.white
: Color(0xff929292)),
),
),
),
)
.toList(),
)
],
),
),
);
}
List<String> _stuff = [
'Portfolio',
'Art',
'Marketing',
'Education',
'Blog',
'Travel',
'Fashion',
'Beauty',
'Design',
'Online Store',
'Fitness',
'Food'
];
}