将长文本紧紧包裹在容器周围

Question

如何将长文本紧紧包裹在容器周围。 MS word 有一个紧凑的包装功能。我需要将我的文本包裹在底部容器周围，使其看起来像上传的图像。

Stack(
      alignment: Alignment.topRight,
      children: [
        Padding(
          padding: EdgeInsets.only(bottom: 4, left: 4),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: Color.fromRGBO(249, 249, 249, 1),
                // color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.10),
                    spreadRadius: 1,
                    blurRadius: 5,
                    offset: Offset(3, 3),
                  )
                ]),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Column(
                children: [
                  Text(
                    "we pay close attention to every detail",
                    style: TextStyle(),
                    textAlign: TextAlign.right,
                  ),
                  Container(
                    alignment: Alignment.topRight,
                    child: new Text(
                      "A really long text",
                      style: TextStyle(),
                      overflow: TextOverflow.fade,
                      textAlign: TextAlign.right,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0,
          left: 0,
          child: Container(
            height: 48,
            width: 48,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              color: Color.fromRGBO(196, 196, 196, 1),
              // color: Colors.white,
            ),
          ),
        )
      ],
    );

我得到的输出是：

我需要这样的输出：

Answer 1

也许这个包可以帮助你drop_cap_text

DropCapText(
loremIpsumText,
style: TextStyle(
    height: 1.3,
    fontFamily: 'times',
),
dropCapChars: 2,
indentation: Offset(25, 10),
),

Answer 2

我找到了实现此 UI 的解决方法。我使用了一个Column 小部件并在其中放置了一个Text 小部件和一个Row 小部件。长文本分为两个独立的Text 小部件。一个在Row 小部件上方，另一个在Row 小部件内部。

在Row 小部件内部，有一个透明的Container，它为我们提供了Text 的包装，整个小部件都在Stack 小部件内部。

这真的很难用语言来解释，所以这是我的实现：

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Stack(
            overflow: Overflow.visible,
            children: [
              Card(
                elevation: 4,
                shadowColor: Colors.black45,
                margin: const EdgeInsets.symmetric(horizontal: 20),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
                child: Container(
                  padding: const EdgeInsets.all(20),
                  color: Colors.white,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      const Text(
                        'we pay close attention to every detail',
                        style: const TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 30,
                        ),
                        textAlign: TextAlign.end,
                      ),
                      const Text(
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.',
                        textAlign: TextAlign.end,
                        style: TextStyle(
                          color: Colors.black54,
                          fontSize: 18,
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // Hidden Widget to force text wrapping
                          Container(
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(16),
                              color: Colors.transparent,
                            ),
                            height: 60,
                            width: 60,
                            margin: const EdgeInsets.only(top: 8, right: 6),
                          ),
                          Expanded(
                            child: const Text(
                              'Lorem ipsum dolor sit amet, elit, sed dolor eiusm tempor incid ut labore et dolorend magnaber aliqua.  adipis elit, sed do eius tepor incid ut labore et dolore magna aliqua.',
                              textAlign: TextAlign.end,
                              overflow: TextOverflow.fade,
                              style: TextStyle(
                                color: Colors.black54,
                                fontSize: 18,
                                fontStyle: FontStyle.italic,
                              ),
                              maxLines: 4,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                left: 16,
                bottom: -16,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: Colors.grey,
                  ),
                  height: 80,
                  width: 80,
                  margin: const EdgeInsets.only(top: 8, right: 6),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}