Flutter网页内容渲染插件html_wrapper的使用

HTML Wrapper

html_wrapper 包提供了一种优化 Flutter 应用程序搜索引擎优化（SEO）的简单解决方案，通过将关键部件转换为真实的 HTML 标签。通过将 Flutter 小部件渲染为真正的 HTML 元素，搜索引擎可以更好地理解应用程序的内容，从而提高可见性和搜索排名。

特性

• 将 Flutter 小部件转换为 HTML 标签以改进 SEO。
• 在生成 SEO 友好的 HTML 输出时保留 Flutter 小部件的功能和样式。
• 可以自定义 HTML 属性和标签以符合 SEO 最佳实践。

开始使用

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
    html_wrapper: ^0.0.3

然后运行 flutter pub get 来获取包。

使用方法

首先导入 html_wrapper 包：

import 'package:html_wrapper/html_wrapper.dart' as wrapp;

文本小部件

与标准文本小部件相比，html_wrapper 的文本小部件的新颖之处在于可以指定标签，例如 <h1>、<span>、<strong> 等。

wrapp.Text(
    'Hello Seo!',
    tag: wrapp.Tag.h1,
    style: TextStyle(
    fontFamily: 'arial',
    fontSize: MediaQuery.of(context).size.width / 6,
    color: Colors.white,
    fontWeight: FontWeight.w900),
),

图像小部件

html_wrapper 中的图像小部件会处理所有参数，如大小、填充和 URL 或文件夹中的图像。

wrapp.Image(
    height: 200,
    width: 200,
    borderRadius: BorderRadius.circular(200),
    href: 'https://github.com/Antoinegtir',
    src: 'https://avatars.githubusercontent.com/u/114834504?v=4',
    fit: BoxFit.cover,
),

机器人小部件

机器人小部件用于设置 HTML 头部的 <meta> 标签，以便搜索引擎爬虫能够识别。

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text(
        'Hello, world!',
        style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 16),
        Robots(content: 'noindex, nofollow'),
    ],
),

示例代码

以下是完整的示例代码：

// ignore_for_file: avoid_web_libraries_in_flutter
import 'package:flutter/material.dart';
import 'package:html_wrapper/html_wrapper.dart' as wrapp;
import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter to HTML Wrapper',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            backgroundColor: Colors.black,
            extendBodyBehindAppBar: true,
            appBar: AppBar(
              backgroundColor: Colors.black,
            ),
            body: const SeoPage()));
  }
}

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

  [@override](/user/override)
  State<SeoPage> createState() => _SeoPageState();
}

class _SeoPageState extends State<SeoPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          alignment: Alignment.center,
          children: [
            const wrapp.Image(
              src: './assets/assets/wrapp.png',
              fit: BoxFit.cover,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                wrapp.Text(
                  'Hello Seo!',
                  style: TextStyle(
                      fontFamily: 'arial',
                      fontSize: MediaQuery.of(context).size.width / 6,
                      color: Colors.white,
                      fontWeight: FontWeight.w900),
                  tag: wrapp.Tag.h1,
                ),
                const SizedBox(
                  height: 300,
                )
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: MediaQuery.of(context).size.height / 2,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    wrapp.Image(
                      src: './assets/assets/github.png',
                      fit: BoxFit.cover,
                      height: MediaQuery.of(context).size.width / 20,
                      width: MediaQuery.of(context).size.width / 20,
                    ),
                    const SizedBox(
                      width: 20,
                    ),
                    wrapp.Text(
                      'Download',
                      href: 'https://github.com/Antoinegtir',
                      style: TextStyle(
                          fontFamily: 'arial',
                          fontSize: MediaQuery.of(context).size.width / 25,
                          color: Colors.white,
                          fontWeight: FontWeight.w900),
                      tag: wrapp.Tag.h1,
                    ),
                  ],
                ),
                Container(
                  height: MediaQuery.of(context).size.height / 4,
                ),
                Row(
                  children: [
                    Container(
                      width: 20,
                    ),
                    wrapp.Image(
                      height: MediaQuery.of(context).size.width / 20,
                      width: MediaQuery.of(context).size.width / 20,
                      borderRadius: BorderRadius.circular(200),
                      href: 'https://github.com/Antoinegtir',
                      src: 'https://avatars.githubusercontent.com/u/114834504?v=4',
                      fit: BoxFit.cover,
                    ),
                    Container(
                      width: 20,
                    ),
                    wrapp.Text(
                      'By Antoine Gonthier',
                      href: 'https://github.com/Antoinegtir',
                      style: TextStyle(
                          fontFamily: 'arial',
                          fontSize: MediaQuery.of(context).size.width / 40,
                          color: Colors.white,
                          fontWeight: FontWeight.w900),
                      tag: wrapp.Tag.h1,
                    ),
                  ],
                )
              ],
            )
          ],
        ));
  }
}