drop cap letter in Flutter

Question

How to achive drop cap letter of a text paragraph in Flutter.
As below:

Answer 1

I managed to hack this together, it looks like it should work but doesn't break at the right spot for some reason. getPositionForOffset seems to give an index that is too large. Might be better than nothing though, and it demonstrates how we can use TextPainter to get the size of a text.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MaterialApp(title: 'Demo', home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
    home: Scaffold(
      body: Container(
        width: 200.0,
        decoration: BoxDecoration(border: Border.all()),
        child: DropCapText(
          dropCap: "L",
          dropCapStyle: Theme.of(context).textTheme.display3,
          text: "orem 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.",
          textStyle: Theme.of(context).textTheme.body1,
        ),
      ),
    ),
  );
}

class DropCapText extends StatelessWidget {
  final String dropCap;
  final TextStyle dropCapStyle;
  final String text;
  final TextStyle textStyle;
  final EdgeInsets dropCapPadding;

  DropCapText({this.dropCap, this.dropCapStyle, this.text, this.textStyle, this.dropCapPadding = EdgeInsets.zero});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        //get the drop cap size
        final dropCapSpan = TextSpan(text: dropCap, style: dropCapStyle);
        final dropCapPainter = TextPainter(text: dropCapSpan, textDirection: Directionality.of(context));
        dropCapPainter.layout(maxWidth: constraints.maxWidth);
        final dropCapSize = dropCapPainter.size;

        //get the position of the last bit of text next to the dropcap
        final textSpan = TextSpan(text: text, style: textStyle);
        final textPainter = TextPainter(text: textSpan, textDirection: Directionality.of(context));
        textPainter.layout(maxWidth: max(constraints.minWidth, constraints.maxWidth - dropCapPadding.horizontal - dropCapSize.width));
        final lastPosition = textPainter.getPositionForOffset(Offset(textPainter.width, dropCapSize.height + dropCapPadding.vertical));

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: dropCapPadding,
                  child: Text(dropCap, style: dropCapStyle),
                ),
                Expanded(
                  child: Text(text.substring(0, lastPosition.offset), style: textStyle, softWrap: true,),
                ),
              ],
            ),
            Text(text.substring(lastPosition.offset), style: textStyle),
          ],
        );
      }
    );
  }
}