Flutter文本样式插件heading_text_flutter的使用

HeadingText Widget

HeadingText 小部件是一个可自定义的 Flutter 小部件，允许你使用类似于 HTML 的标签（如 h1, h2, h3 等）创建具有不同样式的标题。它提供了定义文本内容、样式以及可选文本样式的灵活性。

使用

1. 在你的项目中添加 HeadingText 类。
2. 在代码中使用 HeadingText 小部件来创建标题。

导入

import 'package:heading_text_flutter/heading_text_flutter.dart';

创建标题

要创建一个标题，只需创建 HeadingText 小部件的一个实例并提供必需的参数：tag 和 text。

HeadingText(
  tag: 'h1',  // HTML-like tag such as h1, h2, etc.
  text: 'Hello World',  // The content of the heading
)

自定义文本样式（可选）

你还可以使用可选的 textStyle 参数来自定义标题的文本样式。这允许你修改字体大小、颜色和其他文本属性。

HeadingText(
  tag: 'h2',
  text: 'Custom Style',
  textStyle: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

支持的标签

HeadingText 小部件支持以下 HTML 样式的标签：

• h1
• h2
• h3
• h4
• h5
• h6

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用程序中使用 HeadingText 小部件。

示例代码

import 'package:flutter/material.dart';
import 'package:heading_text_flutter/heading_text_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text('Heading Text'),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 创建 h1 标签
              HeadingText(
                tag: 'h1',
                text: 'Sachin',
              ),
              // 创建 h2 标签
              HeadingText(
                tag: 'h2',
                text: 'Sachin',
              ),
              // 创建 h3 标签
              HeadingText(
                tag: 'h3',
                text: 'Sachin',
              ),
              // 创建 h4 标签
              HeadingText(
                tag: 'h4',
                text: 'Sachin',
              ),
              // 创建 h5 标签
              HeadingText(
                tag: 'h5',
                text: 'Sachin',
              ),
              // 创建 h6 标签
              HeadingText(
                tag: 'h6',
                text: 'Sachin',
              ),
            ],
          ),
        ),
      ),
    );
  }
}