drop_cap_text

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

drop_cap_text 패키지는 첫 번째 글자를 크게 하고 강조하여 문단의 시작을 시각적으로 돋보이게 하는 드롭 캡 효과를 생성하기 위해 설계된 플러터 플러그인입니다. 이는 잡지나 책에서 흔히 사용되는 시각적으로 매력적인 문단 시작 방식을 제공함으로써 텍스트 장식을 향상시킵니다. 패키지는 드롭 캡의 크기, 색상 및 스타일을 사용자 정의할 수 있어 풍부한 텍스트 표시에 적합합니다. 복잡한 애니메이션이나 레이아웃 조정 없이 최소한의 설정으로 플러터 앱에 원활하게 통합됩니다.

사용 사례

기사 서론 강화
매거진 스타일의 레이아웃 만들기
전자책 가독성 향상
텍스트에 시각적 계층 구조 추가
디지털 출판물 디자인

주요 기능

확대된 첫 글자 스타일
사용자 정의 가능한 드롭 캡 크기
텍스트 색상 및 글꼴 변형 지원
기존 텍스트 위젯과의 간단한 통합
외부 종속성 필요 없음

적합한 대상

타이포그래피에 초점을 맞춘 애플리케이션
콘텐츠가 풍부한 앱
전자책 및 독서 앱
블로그 또는 뉴스 플랫폼
디자인 중심의 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,
),

패키지, 저장소 및 앱 카테고리 검색

패키지 설치