drop_cap_text 1.0.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 90

pub package Awesome

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 #

NameTypeDefaultDescription
dataStringnull
modeDropCapModeDropCapMode.insideaside, upwards, ..
textAlignTextAlignnull
indentationOffsetOffset.zero
dropCapCharsint1
dropCapPaddingEdgeInsetsEdgeInsets.zero
dropCapDropCap [Widget]null
styleTextStylenull
dropCapStyleTextStyle
forceNoDescentboolfalse
parseInlineMarkdownboolfalsebold
dropCapPositionDropCapPositionDropCapPosition.start
textDirectionTextDirectionTextDirection.ltr
maxLinesint
overflowTextOverflowTextOverflow.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,
),

TODO #

  • support advanced markdown

example/main.dart

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

final String loremIpsumText =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";

void main() {
  runApp(new ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                DropCapText(
                  loremIpsumText,
                  style: TextStyle(fontStyle: FontStyle.italic),
                ),
                SizedBox(height: 30),
                DropCapText(
                  loremIpsumText,
                  dropCap: DropCap(
                      width: 100,
                      height: 100,
                      child: Image.network('https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')),
                ),
                SizedBox(height: 30),
                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),
                ),
                SizedBox(height: 30),
                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')),
                ),
                SizedBox(height: 30),
                DropCapText(
                  loremIpsumText,
                  style: TextStyle(
                    height: 1.3,
                    fontFamily: 'times',
                  ),
                  dropCapChars: 2,
                  indentation: Offset(25, 10),
                ),
                SizedBox(height: 30),
                DropCapText(
                  loremIpsumText,
                  mode: DropCapMode.upwards,
                  dropCapStyle: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                    fontSize: 120,
                    fontFamily: 'times',
                  ),
                ),
                SizedBox(height: 30),
                DropCapText(
                  loremIpsumText,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    height: 1.2,
                  ),
                  mode: DropCapMode.aside,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  drop_cap_text: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:drop_cap_text/drop_cap_text.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
80
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/drop_cap_text.dart.

Run flutter format to format lib/drop_cap_text.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test