Issue
In this code I am showing days static in this format "S M T W T F S", But I want to make this dynamic.
this is my code
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(19, 33, 0, 0),
child:
Image.asset(
'assets/video_cover.png',
height: 120,
width: 100,
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.fromLTRB(19, 50, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${widget.healthHeroesListData['name']}',
style: GoogleFonts.poppins(
fontSize: 18,
color: Color(0xff444444),
fontWeight: FontWeight.w600,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
Text(
'${widget.healthHeroesListData['areaOfMentoring'].join(', ')}',
style: GoogleFonts.poppins(
fontSize: 12,
color: Color(0xff8F9698),
fontWeight: FontWeight.normal,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
'For ${widget.healthHeroesListData['packages'][0]["name"]} Membership',
style: GoogleFonts.poppins(
fontSize: 14,
color: Color(0xffC691D3),
fontWeight: FontWeight.w600,
),maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 20, 15, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'S',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xFF444444),
),
),
Text(
'M',
style: GoogleFonts.poppins(
fontSize: 21,
color:const Color(0xff8F9698),
),
),Text(
'T',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xff8F9698),
),
),Text(
'W',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xff8F9698),
),
),Text(
'T',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xff8F9698),
),
),Text(
'F',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xff8F9698),
),
),Text(
'S',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xFF444444),
),
),
],),
Text(
'Preferable Days',
style: GoogleFonts.poppins(
fontSize: 12,
color: const Color(0xff8F9698)),
),
],
),
),
SizedBox(width: 10,),
Container(
height: 57,
width: 2,
color: Color(0xFFC4C4C4),
),
SizedBox(width: 10,),
Expanded(
child: Column(
children: [
Text(
'${HHListDetails['mentoringChannel']}',
style: GoogleFonts.poppins(
fontSize: 21,
color: const Color(0xFF444444),
),
),
Text(
'Sessions Type',
style: GoogleFonts.poppins(
fontSize: 12,
color: const Color(0xff8F9698)),
),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text(
'About Health Hero',
style: GoogleFonts.poppins(
fontSize: 18,
color: Color(0xFFC691D3),
fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 17, 0),
child: Text(
"${HHListDetails['experience']}",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Color(0xff444444),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(25, 8, 17, 0),
child: Text(
"• Far far away, behind the word mountains.\n• Far from the countries Vokalia and Consonantia.\n• There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.\n A large language ocean. " +
"\n• Far far away, behind the word mountains.\n• Far from the countries Vokalia and Consonantia.\n• There live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.\n A large language ocean. ",
style: GoogleFonts.poppins(
fontSize: 13,
fontWeight: FontWeight.normal,
color: Color(0xff444444),
),
),
),
],
),
),
In this ScreenShot my days in two color black and grey, Black means available days and grey means unavailable days. I want this,In my api value which days available that days should be black and other should be grey.
this is my api data in json format.In this data i have "preferrableDays" of this value is "Tuesday and Thursday"
Now I want that whatever the data of my preferrableDays is, the letter of that day should be black.
{
image: null,
diseaseType: [
Cancer,
Diabetes,
HeartHealth
],
areaOfMentoring: [
Diabetes,
HeartHealth
],
preferrableDays: [
Tuesday,
Thursday
],
isActive: true,
name: AbhijeetVijaivargia,
experience: HEROisamember-drivencollaborationofemployerswhohaveworkplacepreventionandwellnessprogramsfortheiremployees(includingpublicandprivatesectors,
universities,
healthplans,
andhealthsystems),
providersofservicestoemployers(employeehealthandwell-being(HWB)providers,
benefitsconsultants,
healthplans,
andbrokers)andnon-profitorganizations.ManyoftheseindividualsarerecognizedHWBnationalauthoritiesandthoughtleaders.,
numberOfHours: 4,
mentoringChannel: online,
membershipPackage: 8834200c-c62a-4e9a-a1aa-2123d8fdb3b9,
reasonForMentoring: HERO’sfocusistomoveHWBforwardasawidelyacceptedandaccuratelymeasuredstrategytoenhancethehealthofemployeesandtheirdependents,
andthereby,
controlhealthcarecosts,
improveworkperformance,
andmaximizewell-being.OurvisionistoimprovethehealthofAmericansthroughemployerleadership.,
userUuid: 2448e30a-0d29-4139-8b52-b3e05ba62330,
__v: 0,
packages: [
{
colour: #00ff59,
benefits: [
Benefit1isverygood,
Benefit1isverygood
],
isActive: true,
name: Starter,
annualCost: 99.99,
monthlyCost: 9.99,
numberOfHealthHeroSessions: 1,
numberOfWellnessSupportGroups: 1,
uuid: 8834200c-c62a-4e9a-a1aa-2123d8fdb3b9,
image: public/images/packages/image-1641293813729.jpeg,
__v: 0
}
],
id: null
}
Solution
Try with this code
List preferrableDays = [
'Tuesday',
'Thursday',
];
List weekList = [
{'name': 'Sunday', 'short': 'S'},
{'name': 'Monday', 'short': 'M'},
{'name': 'Tuesday', 'short': 'T'},
{'name': 'Wednesday', 'short': 'W'},
{'name': 'Thursday', 'short': 'T'},
{'name': 'Friday', 'short': 'F'},
{'name': 'Saturday', 'short': 'S'},
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children: [
...weekList.map((e) => Text(
e['short'],
style: TextStyle(
color: preferrableDays.contains(e['name'])
? Colors.black
: Colors.grey),
))
],
),
));
}
Answered By – masum billah sanjid
Answer Checked By – Robin (FlutterFixes Admin)