Flutter实现图标跳转页面遇参数空安全问题求助

我在Flutter项目中，当前图标点击后会跳转至URL，希望修改特定图标使其通过Navigator.push跳转至另一个页面。但为TaskCard添加onTap时出现错误；曾将pageUrl设为空字符串但无效果，移除required修饰后又触发错误：“The parameter 'pageUrl' can't have a value of 'null' because of its type, but the implicit default value is 'null'”。

现有代码 #

DinningScreen 代码片段 #

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),
        ),
        padding: const EdgeInsets.all(12.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(...),
              const SizedBox(height: 20.0),
              const Text(
                "Sections",
                style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    fontFamily: "SpaceGrotesk",
                    color: Colors.black),
              ),
              Row(
                children: [
                  Expanded(
                      child: TaskCard(
                        label: "Teachers",
                        pageUrl: "",
                      )),
                  Expanded(
                      child: TaskCard(
                        imageUrl: "assets/school-bag.png",
                        label: "EduPage",
                        pageUrl: "https://willowcosta.edupage.org",
                      )),
                  // 想要修改为跳转页面的图标
                  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",
                      )),
                ],
              ),
              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),
            ],
          ),
        ),
      ),
    );
  }
}

TaskCard 定义 #

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);

  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(
      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),
          )
        ],
      ),
    );
  }
}

解决方法 #

推荐给TaskCard添加自定义点击回调的方式，既能保留原有URL跳转逻辑，又能支持页面跳转，代码更灵活：

1. 修改TaskCard类 #

添加可选的onTap参数，调整pageUrl为可空类型，优先执行自定义回调：

class TaskCard extends StatelessWidget {
  final String? imageUrl;
  final String? label;
  final String? pageUrl; // 改为可空类型，移除required
  final VoidCallback? onTap; // 新增自定义点击回调

  const TaskCard({
    Key? key,
    this.imageUrl,
    required this.label,
    this.pageUrl,
    this.onTap,
  }) : super(key: key);

  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(
      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: const [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 2.0,
                  spreadRadius: 0.5,
                ),
              ],
            ),
            child: IconButton(
              onPressed: () async {
                // 优先执行自定义回调
                if (onTap != null) {
                  onTap!();
                } 
                // 没有自定义回调时，执行URL跳转逻辑
                else if (pageUrl != null && pageUrl!.isNotEmpty) {
                  await goToWebPage(pageUrl!);
                }
              },
              icon: Image.asset(
                imageUrl ?? "assets/teacher.png",
                height: 75.0,
                width: 70.0,
              ),
            ),
          ),
          const SizedBox(height: 10.0),
          Text(
            label ?? "",
            style: const TextStyle(fontSize: 16.0),
          )
        ],
      ),
    );
  }
}

2. 使用修改后的TaskCard #

在需要跳转页面的地方，直接传入onTap参数即可，无需再套InkWell：

Expanded(
  child: TaskCard(
    imageUrl: "assets/timetable.png",
    label: "Timetable",
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    },
  ),
),

其他场景的使用 #

• 需要跳转URL的TaskCard，正常传pageUrl即可：

Expanded(
  child: TaskCard(
    imageUrl: "assets/school-bag.png",
    label: "EduPage",
    pageUrl: "https://willowcosta.edupage.org",
  ),
),

• 不需要任何跳转的TaskCard，不传pageUrl和onTap即可：

Expanded(
  child: TaskCard(
    label: "Teachers",
  ),
),

内容的提问来源于stack exchange，提问作者Civaa