drop_cap_text

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das drop_cap_text-Paket ist ein Flutter-Plugin, das entwickelt wurde, um Drop-Cap-Effekte im Text zu erzeugen, bei denen der erste Buchstabe eines Absatzes vergrößert und prominent gestaltet wird. Es verbessert die Textgestaltung, indem es eine visuell ansprechende Möglichkeit bietet, Absätze einzuleiten, wie sie häufig in Zeitschriften oder Büchern verwendet wird. Das Paket unterstützt die Anpassung von Größe, Farbe und Stil des Drop Caps, was es ideal für anspruchsvolle Textdarstellungen macht. Es lässt sich problemlos in Flutter-Anwendungen integrieren, mit minimalem Setup, und konzentriert sich auf die Typografieästhetik, ohne komplexe Animationen oder Layoutanpassungen zu erfordern.

Anwendungsfälle

Verbesserung von Artikel-Einleitungen
Zeitungsartige Layouts erstellen
Verbesserung der Lesbarkeit von E-Books
Visuelle Hierarchie zum Text hinzufügen
Gestaltung digitaler Publikationen

Hauptmerkmale

Vergrößerte Erstbuchstabengestaltung
Anpassbare Drop-Cap-Größe
Unterstützung für Textfarbe und Schriftartvariationen
Einfache Integration mit bestehenden Text-Widgets
Keine externen Abhängigkeiten erforderlich

Geeignet für

Typografie-fokussierte Anwendungen
inhaltsreiche Apps
E-Books und Lese-Apps
Blog- oder Nachrichtenplattformen
designgetriebene Benutzeroberflächen

Hinweise

Beschränkt auf den ersten Buchstaben eines Absatzes
Unterstützt keine mehrzeiligen Drop-Caps
Benötigt manuelle Textsegmentierung
Nicht für dynamische Textänderungen optimiert
Könnte zusätzliche Abstandshandhabung erfordern

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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

Pakete, Repositories und App-Kategorien suchen

Paket installieren