The existing code shows a list of buttons of varying interests. Users can tap to select which interests they prefer.
However, if the user has already selected their interests beforehand and comes back to this page, it's illogical to get the users to choose from a fresh state again.
I want to repopulate what the users have previously chosen and reflect back on the screen as chosen (which = widget.viewInterest.isChosen). The color of container will be Color(0xff0B84FE), & color of text is Colors.yellow, as seen in the code below.
Let's say user has chosen this list List UserInterests = [ "☕ Coffee", "🎭 Theaters", ];
QUESTION: How to make containers that contain these strings bool true (which is widget.viewInterest.isChosen), similar to when users have tapped on the respective buttons?
Attached is truncated code:
final List<String> artsInterests = [
"📸 Photography",
"🎭 Theaters",
"🖼️ Exhibitions",
"📐 Architecture",
"🍳 Cooking",
"☕ Coffee",
"🖍️ Design",
"👗 Fashion",
"📚 Reading",
"💃🏽 Dance",
"🏺 Pottery",
"🎨 Drawing",
"💋 Beauty",
"📖 Journalling",
];
StatelessWidget shortened
final List<String> artsInterests;
shortened
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
itemCount: artsInterests.length
itemBuilder: (context, int index) {
return Interests2(AvailableInterestChosen(
artsInterests[index],
isChosen: false,
));
brackets...
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(1),
itemCount: artsInterests.length - 7,
itemBuilder: (context, int index) {
return Interests2(AvailableInterestChosen(
artsInterests[7 + index],
isChosen: userChosenInterests
.contains(artsInterests[7 + index]),
));
closing brackets...
List<String> chosenArtsInterests = [];
List<String> UserInterests = [
"☕ Coffee",
"🎭 Theaters",
];
class Interests2 extends StatefulWidget {
final AvailableInterestChosen viewInterest;
Interests2(this.viewInterest);
String id = 'Interests2';
@override
Interests2State createState() => Interests2State();
}
class Interests2State extends State<Interests2> {
@override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
Container container = Container(
decoration shortened
decoration: BoxDecoration(
color: widget.viewInterest.isChosen && chosenInterests.length < 9
? Color(0xff0B84FE)
: Colors.white.withOpacity(0.87),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.69),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(0, 1), // changes position of shadow
),
],
borderRadius: BorderRadius.circular(9),
),
child: Text(
'${widget.viewInterest.title}',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: widget.viewInterest.isChosen && chosenInterests.length < 9
? Colors.white
: Colors.black),
));
if (widget.viewInterest.isChosen && chosenInterests.length < 9) {
chosenArtsInterests.add('${widget.viewInterest.title}');
print(chosenArtsInterests);
} else {
chosenArtsInterests.remove('${widget.viewInterest.title}');
print(chosenArtsInterests);
}
return GestureDetector(
onTap: () {
setState(() {
widget.viewInterest.isChosen = !widget.viewInterest.isChosen;
});
},
child: container,
);
}
}
class AvailableInterestChosen {
bool isChosen;
String title;
AvailableInterestChosen(this.title, {this.isChosen = false});
}
For the buttons to depict UI that shows they are chosen, my guess is something like
for (string i in UserInterests) setState ((){widget.viewInterest.isChosen})
But in regards to where to put it or the exact code, I'm lost. If anyone has some experience or similar resources to share so I can read on it, that will be great!