Flutter文本下划线插件basic

Flutter文本下划线插件basic_underline的使用

basic_underline 插件为 Flutter 提供了一个可自定义的文本下划线动画组件。你可以选择直线或波浪形下划线动画，并可以自定义颜色，还可以选择性地添加 URL 链接。

功能

直线下划线动画：一条平滑扩展的线条从左到右进行动画。
波浪形下划线动画：一条动画波浪形线条在文本下方移动。
点状下划线动画：一条动画点状线条在文本下方移动。
光线闪烁下划线动画：一条光线在文本下方闪烁。
彩虹光晕动画：一条彩色彩虹从左到右在文本下方过渡。
自定义化：轻松控制文本颜色、下划线颜色、悬停时文本颜色、动画持续时间和下划线厚度。
链接支持：使文本可点击并可选地启动 URL。

安装

在你的 pubspec.yaml 文件中添加 underline_text 依赖：

dependencies:
  underline_text: ^1.4.0

然后运行以下命令以更新包：

flutter pub get

使用

下面是如何在你的 Flutter 应用程序中使用 UnderlineText 组件：

import 'package:flutter/material.dart';
import 'package:underline_text/underline_text.dart'; // 导入包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('UnderlineText 示例')),
        body: Center(
          child: UnderlineText(
            text: '点击我', // 显示给用户的文本
            textColor: Colors.black, // 文本颜色
            underlineColor: Colors.blue, // 下划线颜色
            hoverTextColor: Colors.blueAccent, // 悬停时文本颜色
            animationType: UnderlineAnimationType.squiggly, // 下划线动画类型
            animationDuration: Duration(milliseconds: 500), // 动画持续时间
            underlineThickness: 3.0, // 下划线厚度
            url: 'www.himalthapa1.com.np', // 可选的 URL
          ),
        ),
      ),
    );
  }
}

更多关于Flutter文本下划线插件basic_underline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼

更多关于Flutter文本下划线插件basic_underline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

basic_underline 是一个用于在 Flutter 中为文本添加下划线的简单插件。它可以帮助你轻松地为文本添加自定义的下划线样式，而无需手动绘制或使用复杂的代码。

安装 `basic_underline` 插件

首先，你需要在 pubspec.yaml 文件中添加 basic_underline 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  basic_underline: ^0.1.0  # 请检查最新版本号

然后运行 flutter pub get 来安装依赖。

使用 `basic_underline` 插件

安装完成后，你可以在代码中使用 basic_underline 来为文本添加下划线。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Basic Underline Example'),
        ),
        body: Center(
          child: BasicUnderline(
            child: Text(
              'Hello, Underlined Text!',
              style: TextStyle(fontSize: 24),
            ),
            color: Colors.blue, // 下划线颜色
            thickness: 2.0, // 下划线厚度
            offset: 4.0, // 下划线与文本的垂直偏移量
          ),
        ),
      ),
    );
  }
}

`BasicUnderline` 的参数说明

child: 需要添加下划线的文本组件。
color: 下划线的颜色，默认为 Colors.black。
thickness: 下划线的厚度，默认为 1.0。
offset: 下划线与文本的垂直偏移量，默认为 0.0。

自定义下划线样式

你可以通过调整 color、thickness 和 offset 参数来自定义下划线的样式。例如，你可以将下划线颜色设置为红色，厚度设置为 3.0，并将偏移量设置为 6.0：

BasicUnderline(
  child: Text(
    'Custom Underlined Text',
    style: TextStyle(fontSize: 24),
  ),
  color: Colors.red,
  thickness: 3.0,
  offset: 6.0,
)

Flutter文本下划线插件basic_underline的使用