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 分類

安裝套件