Flutter文本颜色处理插件text_coloration的使用

Flutter文本颜色处理插件text_coloration的使用

pub

获取开始

Flutter包：用于搜索文本的一部分并用颜色高亮显示（可用于搜索小部件或段落）。

安装

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

dependencies:
  text_coloration: ^0.3.0

使用

示例一：使用words方法
TextColorationWidget.words(
  searchedTextStyle: const TextStyle(
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
  wordsToStyled: const ['simply', 'dummy', 'text', 'lorem', 'ipsum'],
  text: 
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
  defaultTextStyleColor: const TextStyle(color: Colors.black),
),
示例二：使用text方法
TextColorationWidget.text(
  searchedTextStyle: const TextStyle(
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
  textToStyled: "simply dummy text",
  text: 
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
  defaultTextStyleColor: const TextStyle(color: Colors.black),
),
示例三：使用action方法
TextColorationWidget.action(
  urlTextStyle: const TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
  ),
  onTap: () {
    launchUrl(
      Uri.parse('https://pub.dev/packages/text_coloration'),
    );
  },
  textToBeStyled: 'https://pub.dev/packages/text_coloration',
  text: 
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry<<https://pub.dev/packages/text_coloration>>.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
  defaultTextStyleColor: const TextStyle(color: Colors.black),
),

预览

完整示例代码

import 'package:flutter/material.dart';
import 'package:text_coloration/text_coloration.dart';
import 'package:url_launcher/url_launcher.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: const FirstExamplePage(),
    );
  }
}

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

  [@override](/user/override)
  State<StatefulWidget> createState() => _StateFirstExample();
}

class _StateFirstExample extends State<FirstExamplePage> {
  var index = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: IndexedStack(
          index: index,
          children: const [
            TextColorationExamples(),
            TextExample(),
          ],
        ),
      ),
      bottomNavigationBar: BottomNav(
        index: index,
        onTap: (index) {
          setState(() {
            this.index = index;
          });
        },
      ),
    );
  }
}

class BottomNav extends StatelessWidget {
  final int index;
  final Function(int) onTap;
  const BottomNav({
    super.key,
    required this.index,
    required this.onTap,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: index,
      onTap: onTap,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.color_lens),
          label: "colored texts",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.text_fields),
          label: "normal texts",
        ),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, _) {
        return Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: TextColorationWidget.words(
            searchedTextStyle: const TextStyle(
              color: Colors.red,
              fontWeight: FontWeight.bold,
            ),
            wordsToStyled: const ['simply', 'dummy', 'text', 'lorem', 'ipsum'],
            text: 
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
            defaultTextStyleColor: const TextStyle(color: Colors.black),
          ),
        );
      },
      itemCount: 150,
      addAutomaticKeepAlives: true,
      addRepaintBoundaries: false,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: TextColorationWidget.action(
              urlTextStyle: const TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
                decorationColor: Colors.blue,
              ),
              onTap: () {
                launchUrl(
                  Uri.parse('https://pub.dev/packages/text_coloration'),
                );
              },
              textToBeStyled: 'https://pub.dev/packages/text_coloration',
              text: 
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry <<https://pub.dev/packages/text_coloration>>.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
              defaultTextStyleColor: const TextStyle(color: Colors.black),
            ),
          ),
          const Divider(),
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: TextColorationWidget.action(
              urlTextStyle: const TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
                decorationColor: Colors.blue,
              ),
              onTap: () {
                launchUrl(
                  Uri.parse('https://pub.dev/packages/text_coloration'),
                );
              },
              textToBeStyled: 'https://pub.dev/packages/text_coloration',
              text: 
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry <<https://pub.dev/packages/text_coloration>>.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry <<https://pub.dev/packages/text_coloration>>.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ",
              defaultTextStyleColor: const TextStyle(color: Colors.black),
            ),
          ),
          for (var i = 0; i < 50; i++) ...[
            const Text(
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
            ),
            const Text("---"),
            const SizedBox(
              height: 5,
            )
          ],
        ],
      ),
    );
  }
}

更多关于Flutter文本颜色处理插件text_coloration的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本颜色处理插件text_coloration的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


text_coloration 是一个用于 Flutter 的插件，它允许你在文本中应用不同的颜色和样式。这个插件特别适用于需要在同一文本字符串中使用多种颜色或样式的场景。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  text_coloration: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

使用示例

以下是一个简单的示例，展示如何使用 text_coloration 插件来为文本设置不同的颜色和样式。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Coloration Example'),
        ),
        body: Center(
          child: TextColoration(
            text: 'Hello, World!',
            styles: [
              TextStyle(color: Colors.red, fontSize: 24),
              TextStyle(color: Colors.green, fontSize: 24),
              TextStyle(color: Colors.blue, fontSize: 24),
            ],
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

参数说明

  • text: 要显示的文本字符串。
  • styles: 一个 List<TextStyle>，用于定义文本中每个字符的样式。如果 styles 列表的长度小于文本的长度，样式将循环使用。
  • textAlign: 文本的对齐方式，默认为 TextAlign.start。

高级用法

你可以通过 TextColoration 的 children 属性来更灵活地控制每个字符的样式：

TextColoration(
  children: [
    TextSpan(text: 'Hello', style: TextStyle(color: Colors.red, fontSize: 24)),
    TextSpan(text: ', ', style: TextStyle(color: Colors.green, fontSize: 24)),
    TextSpan(text: 'World!', style: TextStyle(color: Colors.blue, fontSize: 24)),
  ],
  textAlign: TextAlign.center,
)
回到顶部