Flutter 中的首字母大写字母

Question

如何在 Flutter 中实现文本段落的首字下沉字母。
如下：

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

Answer 2

你可以这样构建

请在StackOverFlow查看我的回答