drop_cap_text

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

drop_cap_text 包是一个专为 Flutter 设计的插件，用于在文本中创建首字母大写效果，即段落的第一个字母被放大并突出显示。它通过提供一种视觉上吸引人的段落开头方式，增强了文本装饰效果，常用于杂志或书籍中。该包支持对首字母大写的大小、颜色和样式进行自定义，非常适合丰富文本展示。它可轻松集成到 Flutter 应用中，设置简单，专注于排版美学，无需复杂的动画或布局调整。

适合场景

增强文章引言
创建杂志风格的布局
提高电子书可读性
为文本添加视觉层次
设计数字出版物

主要特点

放大首字母样式
可自定义的首字母大写大小
支持文本颜色和字体变化
与现有文本控件的简单集成
无需外部依赖

适合对象

专注于排版的应用程序
内容丰富的应用
电子书和阅读应用
博客或新闻平台
以设计为导向的用户界面

使用建议

仅限段落的第一个字母
不支持多行首字母大写
需要手动文本分段
未针对动态文本更改进行优化
可能需要额外的间距处理

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

This Flutter plugin aims to achive drop cap in text capitalization.

Usage

import 'package:drop_cap_text/drop_cap_text.dart';

DropCapText(
    loremIpsumText,
    style: TextStyle(fontStyle: FontStyle.italic),
),

ex1

Properties

Name	Type	Default	Description
data	String	null
mode	DropCapMode	DropCapMode.inside	aside, upwards, ..
textAlign	TextAlign	null
indentation	Offset	Offset.zero
dropCapChars	int	1
dropCapPadding	EdgeInsets	EdgeInsets.zero
dropCap	DropCap `[Widget]`	null
style	TextStyle	null
dropCapStyle	TextStyle
forceNoDescent	bool	false
parseInlineMarkdown	bool	false	bold
dropCapPosition	DropCapPosition	DropCapPosition.start
textDirection	TextDirection	TextDirection.ltr
maxLines	int
overflow	TextOverflow	TextOverflow.clip

Customization

Custom DropCap Widget: Image

ex3

DropCapText(
    loremIpsumText,
    dropCap: DropCap(
    width: 100,
    height: 100,
    child: Image.network(
    	'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
    ),
),

Custom DropCap Widget: Parse Inline Markdown

only supports italic bold underline

ex8

DropCapText(
  'Lorem ipsum **dolor sit amet, consectetur adipiscing elit, ++sed do eiusmod++ tempor incididunt** ut labore et _dolore magna aliqua_.',
  parseInlineMarkdown: true,
  dropCapStyle: TextStyle(fontSize: 100, fontWeight: FontWeight.bold, color: Colors.green),
  dropCapPadding: EdgeInsets.only(right: 19.0),
  style: TextStyle(fontSize: 18.0, height: 1.5),
),

Custom DropCap Widget: Image right + justification

ex7

DropCapText(
    loremIpsumText,
    dropCapPosition: DropCapPosition.end,
    textAlign: TextAlign.justify,
    dropCap: DropCap(
    width: 100,
    height: 100,
    child: Image.network(
    	'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
    ),
),

2 characters + indentation

ex2

DropCapText(
    loremIpsumText,
    style: TextStyle(
        height: 1.3,
        fontFamily: 'times',
    ),
    dropCapChars: 2,
    indentation: Offset(25, 10),
),

Upward drop cap

ex5

DropCapText(
    loremIpsumText,
    mode: DropCapMode.upwards,
    dropCapStyle: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
        fontSize: 120,
        fontFamily: 'times',
    ),
),

Aside drop cap

ex6

DropCapText(
    loremIpsumText,
    style: TextStyle(
        fontWeight: FontWeight.bold,
        height: 1.2,
    ),
    mode: DropCapMode.aside,
),

搜索插件、代码仓与 APP 分类

安装插件