flutter_drop_cap_text #

A Flutter package for creating beautiful drop cap text effects in your Flutter applications.

Features #

• 🎨 Multiple Drop Cap Modes: Support for inside, upwards, aside, and baseline modes
• 🖼️ Custom Drop Cap Widgets: Use images or custom widgets as drop caps
• 📝 Inline Markdown Parsing: Support for bold, italic, and underline formatting
• 🎯 Flexible Positioning: Position drop cap at start or end of text
• 🎨 Customizable Styling: Full control over drop cap and text styling
• 📐 Indentation & Padding: Fine-tune spacing and positioning
• 🔤 Multiple Characters: Support for multi-character drop caps

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_drop_cap_text: ^1.0.1

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:flutter_drop_cap_text/drop_cap_text.dart';

DropCapText(
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
  style: TextStyle(fontStyle: FontStyle.italic),
),

Custom Drop Cap Widget: Image #

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

Parse Inline Markdown #

Supports _italic_, **bold**, and ++underline++ formatting.

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

Image Right + Justification #

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

Multiple Characters + Indentation #

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

Upward Drop Cap #

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

Aside Drop Cap #

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

API Reference #

DropCapText #

A widget that displays text with a drop cap effect.

Parameters

• data (required): The text string to display
• mode (default: DropCapMode.inside): Drop cap display mode (inside, upwards, aside, baseline)
• textAlign (default: TextAlign.start): Text alignment
• indentation (default: Offset.zero): Indentation offset for the drop cap
• dropCapChars (default: 1): Number of characters to use for the drop cap
• dropCapPadding (default: EdgeInsets.zero): Padding around the drop cap
• dropCap (default: null): Custom drop cap widget (e.g., image)
• style (default: null): TextStyle for the main text
• dropCapStyle (default: null): TextStyle for the drop cap
• forceNoDescent (default: false): Force no descent for the drop cap
• parseInlineMarkdown (default: false): Enable inline markdown parsing (bold, italic, underline)
• dropCapPosition (default: DropCapPosition.start): Position of the drop cap (start or end)
• textDirection (default: TextDirection.ltr): Text direction
• maxLines (default: null): Maximum number of lines
• overflow (default: TextOverflow.clip): Text overflow behavior

DropCapMode #

Enum defining the drop cap display modes:

• inside: Default mode, drop cap is inside the text flow
• upwards: Drop cap extends upward
• aside: Drop cap is positioned aside the text
• baseline: Drop cap aligns with baseline (limited customization support)

DropCapPosition #

Enum defining the drop cap position:

• start: Drop cap at the beginning of text
• end: Drop cap at the end of text

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.