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

Question

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, I had set the pageUrl = "", but it didn't return anything so I removed the this.required pageUrl and changed to this.pageUrl and now I have this error The parameter 'pageUrl' can't have a value of 'null' because of its type, but the implicit default value is 'null', 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

          Expanded(
                  child: InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => HomeScreen()),
                      );
                    },
                    child: TaskCard(
                      imageUrl: "assets/timetable.png",
                      pageUrl: "",
                      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 {
            if(pageUrl !=""){
              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),
          )
        ],
      ),
    );
  }
}

Answer 1

The parameter 'pageUrl' can't have a value of 'null' because of its type, but the implicit default value is 'null'.

Check whether the pageUrl is an empty String. If it is an empty String, don't call goToWebPage.

onPressed: () async {
   if(pageUrl !=""){
    await goToWebPage(pageUrl);
     }
   },