curved_render_text #

用来将文本根据曲率进行弯曲，通过自定义渲染Widget实现，通过计算弯曲后的文本实际宽高来重新赋值Widget的Size.

使用场景：弯曲文本后需要测量实际的文本显示部分的宽高，用以给其添加跟随文本长度以及曲率变化的边框

插件同时支持拓展绘制前和绘制后的方法，允许使用者自定义绘制需要的内容，如：文本上划线、删除线、下划线等。

该插件在flutter_arc_text的基础上大幅修改的，删除了 许多原有功能及属性。

🖼️ Preview #

准备工作 🍭 #

Flutter #

执行 flutter pub add curved_render_text， 或者将 curved_render_text 手动添加至 pubspec.yaml 引用。

dependencies:
  curved_render_text: ^latest_version

🕹️ 使用方法 #

import 'package:curved_render_text/curved_render_text.dart';
...
CurvedText(
  text: '文本根据曲率设置弯曲并返回size',
  textStyle: const TextStyle(fontSize: 18, color: Colors.black),
  curvature: 0.5,//曲率范围-1到1
  beforeDrawing: ...,//文本绘制前绘制
  afterDrawing: ...,//文本绘制后绘制
)
...

Demo #

完整示例代码如下

import 'package:curved_render_text/curved_render_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter CurvedText Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double curvature = 100;
  final TextStyle _textStyle = const TextStyle(fontSize: 18, color: Colors.black);
  TextStyle _textDecorationStyle = const TextStyle(fontSize: 18, color: Colors.black,decorationThickness: 2);
  final TextEditingController _textEditingController = TextEditingController
    (text: '文本根据曲率弯曲，通过自定义渲染widget实现，弯曲后可返回widget的实际宽度和高度');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            Expanded(child: Stack(
              alignment: Alignment.center,
              clipBehavior: Clip.none,
              children: [
                OverflowBox(
                  maxWidth: double.infinity,
                  maxHeight: double.infinity,
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Theme.of(context).primaryColor,
                        width: 1,
                      ),
                    ),
                    child: CurvedText(
                      text: _textEditingController.text,
                      textStyle: _textStyle,
                      curvature: curvature/100.0,
                      afterDrawing: _makeDelegate(_textDecorationStyle,),
                    ),
                  ),
                )
              ],
            ),),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SizedBox(
                  width: 200,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Slider(
                        value: curvature,
                        divisions: 200,
                        label: '弯曲程度${curvature.toInt()}%',
                        min: -100,
                        max: 100,
                        onChanged: (value){
                          setState(() {
                            curvature = value.floorToDouble();
                          });
                        },
                      ),
                      Row(
                        children: [
                          CupertinoSwitch(value: _textDecorationStyle.decoration==TextDecoration.overline,
                            activeColor: Theme.of(context).primaryColor,
                            onChanged: (value){
                              setState(() {
                                _textDecorationStyle = _textDecorationStyle.copyWith(
                                  decoration: value?TextDecoration.overline:TextDecoration.none,
                                );
                              });
                            },),
                          Text('上划线',style: TextStyle(fontSize: 14,color: Theme.of(context).primaryColor),),
                        ],
                      ),
                      Row(
                        children: [
                          CupertinoSwitch(value: _textDecorationStyle.decoration==TextDecoration.lineThrough,
                            activeColor: Theme.of(context).primaryColor,
                            onChanged: (value){
                              setState(() {
                                _textDecorationStyle = _textDecorationStyle.copyWith(
                                  decoration: value?TextDecoration.lineThrough:TextDecoration.none,
                                );
                              });
                            },),
                          Text('删除线',style: TextStyle(fontSize: 14,color: Theme.of(context).primaryColor),),
                        ],
                      ),
                      Row(
                        children: [
                          CupertinoSwitch(value: _textDecorationStyle.decoration==TextDecoration.underline,
                            activeColor: Theme.of(context).primaryColor,
                            onChanged: (value){
                              setState(() {
                                _textDecorationStyle = _textDecorationStyle.copyWith(
                                  decoration: value?TextDecoration.underline:TextDecoration.none,
                                );
                              });
                            },),
                          Text('下划线',style: TextStyle(fontSize: 14,color: Theme.of(context).primaryColor),),
                        ],
                      ),
                    ],
                  ),
                ),
                SizedBox(width: 200,height: 80,child: CupertinoTextField(
                  showCursor: true,
                  controller: _textEditingController,
                  style: TextStyle(
                    fontSize: 12,
                    color: Theme.of(context).primaryColor,
                  ),
                  maxLines: null,
                  onChanged: (value){
                    setState(() {});
                  },
                )),
              ],
            ),
          ],
        ),
      ),
    );
  }

  PainterDelegate _makeDelegate(TextStyle textStyle) =>
          (PaintingContext context,
          Offset offset,
          Size size,
          double radius,
          double startAngle,
          double sweepAngle,
          double finalAngle,
          Offset centerOffset,
          double letterWidth,
          double letterHeight,
          double curvature,) {
        Rect? rect;
        if(textStyle.decoration == TextDecoration.overline){
          rect = Rect.fromCircle(
            center: centerOffset,
            radius: radius,
          );
        } else if(textStyle.decoration == TextDecoration.lineThrough){
          rect = Rect.fromCircle(
            center: centerOffset,
            radius: radius+letterHeight/2,
          );
        } else if(textStyle.decoration == TextDecoration.underline){
          rect = Rect.fromCircle(
            center: centerOffset,
            radius: radius+(curvature>=0?0:1)*letterHeight,
          );
        }
        if (rect!=null) {
          context.canvas.drawArc(
            rect,
            startAngle,
            sweepAngle,
            false,
            Paint()
              ..style = PaintingStyle.stroke
              ..strokeCap = StrokeCap.round
              ..strokeWidth = textStyle.decorationThickness??1
              ..color = textStyle.decorationColor??textStyle.color??Colors.black,
          );
        }
      };
}