drop_cap_text

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

drop_cap_text パッケージは、段落の最初の文字を大きくして目立たせるドロップキャップ効果を作成するためのFlutterプラグインです。テキスト装飾を向上させ、雑誌や本でよく使われる視覚的に魅力的な段落の始め方を提供します。このパッケージでは、ドロップキャップのサイズ、色、スタイルをカスタマイズでき、豊かなテキスト表示に最適です。最小限のセットアップでFlutterアプリにスムーズに統合され、複雑なアニメーションやレイアウト調整を必要とせず、タイポグラフィの美学に焦点を当てています。

用途

記事の導入部分の強化
マガジン風のレイアウトを作成する
電子書籍の読みやすさの向上
テキストに視覚的階層を追加する
デジタル出版物のデザイン

主な機能

拡大された最初の文字スタイル
カスタマイズ可能なドロップキャップサイズ
テキストの色およびフォントの変化に対応
既存のテキストウィジェットとの簡単な統合
外部の依存関係は不要です

適している対象

タイポグラフィーに焦点を当てたアプリケーション
コンテンツ豊富なアプリ
電子書と読書アプリ
ブログまたはニュースプラットフォーム
デザイン駆動型のUI

注意事項

段落の最初の文字に限定
複数行のドロップキャップをサポートしていません
手動でのテキストセグメンテーションが必要です
動的テキスト変更に最適化されていません
追加のスペース処理が必要になる可能性があります

元の 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,
),

パッケージ、リポジトリ、アプリカテゴリを検索

パッケージをインストール