How do I make mutiple icons go to different url's - flutter

Question

I have my app which has some icons, the problem is that I set the icons as extensions/parents of one icon, so when I set an icon to go to a url all other icons go to that url too. But that is not what I want, I want each icon to go to a separate url.
The code for the extended icons is:
`
Row(
children: [
Expanded(
child: TaskCard(
label: "Teachers",
)),
Expanded(
child: TaskCard(
imageUrl: "assets/school-bag.png",
label: "EduPage",
pageUrl: "https://willowcosta.edupage.org",
)),
`
error displayed:
and the code for the parent icon is:
SizedBox(
height: 20.0,
),
Text(
"Sections",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: "SpaceGrotesk",
color: Colors.black),
),
//Here we set the "Shortcuts"
//If you click Teachers it will take you the page where you can see the Teachers -
//names a nd availabity alongs side the subject they teach
//If you click EduPage it takes you to edupage
//If you click Timetable it takes you to the Timetable generator
//If you click Messages it asks you to join a messenger Gc of Students of your class
Row(
children: [
Expanded(
child: TaskCard(
label: "Teachers",
)),
Expanded(
child: TaskCard(
imageUrl: "assets/school-bag.png",
label: "EduPage",
pageUrl: "https://willowcosta.edupage.org",
)),
Expanded(
child: TaskCard(
imageUrl: "assets/timetable.png",
label: "Timetable",
)),
Expanded(
child: TaskCard(
imageUrl: "assets/message.png",
label: "Messages",
)),
],
),
//Here we set the tasks that we have
const SizedBox(
height: 20.0,
),
const Text(
"You have 6 tasks for this week",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: "SpaceGrotesk",
color: Colors.black),
),
const TaskContainer(),
const TaskContainer(),
const TaskContainer(),
const TaskContainer(),
const TaskContainer(),
const TaskContainer(),
const SizedBox(
height: 100.0,
),
],
),
),
),
bottomSheet: const BottomSheetCard(),
);
}
}
//hier the first class ends
class TaskCard extends StatelessWidget {
final String? imageUrl;
final String? label;
const TaskCard({Key? key, this.imageUrl, this.label}) : super(key: key);
//Function to launch the selected url
Future<void> goToWebPage(String urlString) async {
final Uri _url = Uri.parse(urlString);
if (!await launchUrl(_url)) {
throw 'Could not launch $_url';
}
}
#override
Widget build(BuildContext context) {
return Padding(
//Here we set the properties of our Sections (Teachers etc)
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
height: 80.0,
width: 76.1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.grey, blurRadius: 2.0, spreadRadius: 0.5),
]),
child: IconButton(
onPressed: () async {
await goToWebPage(pageUrl);
},
icon: Image.asset(
imageUrl ?? "assets/teacher.png",
height: 75.0,
width: 70.0,
),
),
),
SizedBox(
height: 10.0,
),
Text(
label ?? "",
style: TextStyle(fontSize: 16.0),
)
],
),
);
}
}
error 2 displayed:
My app looks like this:
I want each icon to take me to a different website

Answer 1

In your parent icon you can define new string variable in constructor and name it pageUrl like two other variable imageUrl, label, now use it lie this:
onPressed: () async {
await goToWebPage(pageUrl);
},
then pass it like this:
Expanded(
child: TaskCard(
imageUrl: "assets/school-bag.png",
label: "EduPage",
pageUrl: "https://willowcosta.edupage.org",
),
),
Full Example of TaskCard calss:
class TaskCard extends StatelessWidget {
final String imageUrl;
final String label;
final String pageUrl;//<-- add this
const TaskCard(
{Key? key,
required this.imageUrl,
required this.label,
required this.pageUrl})//<-- add this
: super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
height: 80.0,
width: 76.1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.grey, blurRadius: 2.0, spreadRadius: 0.5),
]),
child: IconButton(
onPressed: () async {
await goToWebPage(pageUrl);//<-- add this
},
icon: Image.asset(
imageUrl ?? "assets/teacher.png",
height: 75.0,
width: 70.0,
),
),
),
SizedBox(
height: 10.0,
),
Text(
label ?? "",
style: TextStyle(fontSize: 16.0),
)
],
),
);
}
}