Package detailsv1.1.3

drop_cap_text

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

pub.dev API documentation Source code

30-day downloads: 264
Likes: 101
Pub points: 55

Install package

flutter pub add drop_cap_text

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The drop_cap_text package is a Flutter plugin designed to create drop cap effects in text, where the first letter of a paragraph is enlarged and styled prominently. It enhances text decoration by offering a visually appealing way to begin paragraphs, commonly used in magazines or books. The package supports customization of the drop cap's size, color, and styling, making it ideal for rich text displays. It integrates seamlessly into Flutter apps with minimal setup, focusing on typography aesthetics without requiring complex animations or layout adjustments.

Use cases

Enhancing article introductions
Creating magazine-style layouts
Improving e-book readability
Adding visual hierarchy to text
Designing digital publications

Key features

Enlarged first letter styling
Customizable drop cap size
Support for text color and font variations
Simple integration with existing text widgets
No external dependencies required

Suitable for

Typography-focused applications
Content-rich apps
E-books and reading apps
Blog or news platforms
Design-driven UIs

Considerations

Limited to first letter of a paragraph
Does not support multi-line drop caps
Requires manual text segmentation
Not optimized for dynamic text changes
May need additional spacing handling

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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