使用Flutter News Toolkit开发遇参数类型不匹配错误求助

错误核心是你传递给onLinkTap的回调函数参数不符合flutter_html库的要求：你当前写了4个参数（url, context, attributes, element），但flutter_html的onLinkTap仅接收3个参数：String? url, Map<String, String> attributes, Element? element，多出来的context参数导致了类型不匹配。

修复方案 #

修改onLinkTap的回调参数列表，移除多余的context参数。如果需要使用上下文，直接用build方法中已有的context即可。

修复后的完整代码：

import 'package:app_ui/app_ui.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart' as flutter_html;

import 'package:news_blocks/news_blocks.dart';
import 'package:url_launcher/url_launcher.dart';

/// {@template html}
/// A reusable html news block widget.
/// {@endtemplate}
class Html extends StatelessWidget {
  /// {@macro html}
  const Html({required this.block, super.key});

  /// The associated [HtmlBlock] instance.
  final HtmlBlock block;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: AppSpacing.sm),
      child: flutter_html.Html(
        // 移除多余的context参数
        onLinkTap: (url, attributes, element) {
          if (url == null) return;
          final uri = Uri.tryParse(url);
          if (uri == null) return;
          launchUrl(uri).ignore();
        },
        data: block.content,
        style: {
          'p': flutter_html.Style.fromTextStyle(
            theme.textTheme.bodyLarge!,
          ),
          'h1': flutter_html.Style.fromTextStyle(
            theme.textTheme.displayLarge!,
          ),
          'h2': flutter_html.Style.fromTextStyle(
            theme.textTheme.displayMedium!,
          ),
          'h3': flutter_html.Style.fromTextStyle(
            theme.textTheme.displaySmall!,
          ),
          'h4': flutter_html.Style.fromTextStyle(
            theme.textTheme.headlineMedium!,
          ),
          'h5': flutter_html.Style.fromTextStyle(
            theme.textTheme.headlineSmall!,
          ),
          'h6': flutter_html.Style.fromTextStyle(
            theme.textTheme.titleLarge!,
          ),
        },
      ),
    );
  }
}

额外检查 #

如果修复后仍有问题，可检查pubspec.yaml中flutter_html的版本，确保和Flutter News Toolkit要求的版本一致，避免因版本迭代导致的API签名变化。

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