dart - Flutter 中的首字下沉字母

Question

如何在Flutter中实现文本段落的drop cap字母。
如下图:

Answer 1

我设法将其破解在一起，看起来它应该可以工作，但由于某种原因没有在正确的位置中断。 getPositionForOffset 似乎给出了一个太大的索引。不过总比没有好，它演示了我们如何使用 TextPainter 来获取文本的大小。

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),
          ],
        );
      }
    );
  }
}