How do I make it so that when I click an icon it opens another page file in flutter

How do I make it so that when I click an icon it opens another page file in flutter? I have this icons which when you click them it redirects you to a url, I want to make it so when you click one specific icon instead of opening a url it opens another page file, acting like a navigator.push…

But when I add an ontap to my taskcard I get an error "the named parameter ‘onTap’ isn’t defined", my code is like this:

import 'dart:ui';
import 'package:url_launcher/url_launcher.dart';
import '';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:schoolmanagement/nav_bar.dart';


class DinningScreen extends StatefulWidget {
  const DinningScreen({super.key});

  @override
  State<DinningScreen> createState() => _DinningState();

}

class _DinningState extends State<DinningScreen> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavBar(),
      key: scaffoldKey,
      appBar: AppBar(...),

body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xffF6FECE), Color(0xffB6C0C8)],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              tileMode: TileMode.clamp),
        ),

        //Here we set the "Manage your ... box and it's properties"
        padding: const EdgeInsets.all(12.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(...),

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",
                        pageUrl: "",
                      )),
                  Expanded(
                      child: TaskCard(
                        imageUrl: "assets/school-bag.png",
                        label: "EduPage",
                        pageUrl: "https://willowcosta.edupage.org",
                      )),

//This is what I want to change from going to url to another page

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

          Expanded(
              child: TaskCard(
                imageUrl: "assets/timetable.png",
                pageUrl: "https://www.asctimetables.com",
                label: "Timetable",
              )),
          Expanded(
              child: TaskCard(
                imageUrl: "assets/message.png",
                pageUrl: "https://www.messenger.com",
                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,
      ),
    ],
  ),
),

),

The TaskCard definition is here:

class TaskCard extends StatelessWidget {
  final String? imageUrl;
  final String? label;
  final String pageUrl;
  const TaskCard(
      {Key? key, this.imageUrl, required this.label, required this.pageUrl})
      : 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),
          )
        ],
      ),
    );
  }
}

>Solution :

Wrap InkWell in your TaskCard.

child: InkWell(
    onTap: () {
        // Function is executed on tap.
    },
    child:TaskCard(...),
  ),