Flutter圆形文本展示插件flutter_circular_text的使用

Circular Text Widget

flutter_circular_text 是一个用于在Flutter应用程序中创建圆形排列文本效果的插件。它允许你将多个文本项以圆形的方式排列，可以自定义每个文本项的位置、样式和方向等属性。

Installation

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_circular_text: "^0.3.1"

然后，在需要使用的Dart文件顶部导入包：

import 'package:flutter_circular_text/circular_text.dart';

Basic Usage

下面是一个简单的例子，展示了如何使用 CircularText 小部件来创建圆形文本布局。这个例子包含了两个文本项：一个位于圆的内部，另一个位于外部，并且它们按照不同的方向排列（顺时针和逆时针）。

CircularText(
  children: [
    TextItem(
      text: Text(
        "Chuck Norris".toUpperCase(),
        style: TextStyle(
          fontSize: 28,
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 12, // 文本之间的间距
      startAngle: -90, // 开始角度
      startAngleAlignment: StartAngleAlignment.center, // 角度对齐方式
      direction: CircularTextDirection.clockwise, // 排列方向
    ),
    TextItem(
      text: Text(
        "top 100 Facts".toUpperCase(),
        style: TextStyle(
          fontSize: 20,
          color: Colors.amberAccent,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 10,
      startAngle: 90,
      startAngleAlignment: StartAngleAlignment.center,
      direction: CircularTextDirection.anticlockwise,
    ),
  ],
  radius: 125, // 圆形半径
  position: CircularTextPosition.inside, // 文本相对于圆形的位置
  backgroundPaint: Paint()..color = Colors.grey.shade200, // 背景画笔设置
)

Examples

你可以查看 example 项目中的更多示例代码，其中包括单个文本和多个文本的演示。

Demos

Single Text Demo

Multi Text Demo

示例Demo代码

为了更直观地了解如何在实际项目中使用此插件，这里提供了一个完整的Flutter应用示例，该应用展示了如何实现单个文本的圆形布局。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_circular_text/circular_text.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Circular Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Circular Text Demo'),
        ),
        body: Center(
          child: CircularText(
            children: [
              TextItem(
                text: Text(
                  "Chuck Norris".toUpperCase(),
                  style: TextStyle(
                    fontSize: 28,
                    color: Colors.blue,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                space: 12,
                startAngle: -90,
                startAngleAlignment: StartAngleAlignment.center,
                direction: CircularTextDirection.clockwise,
              ),
            ],
            radius: 125,
            position: CircularTextPosition.inside,
            backgroundPaint: Paint()..color = Colors.grey.shade200,
          ),
        ),
      ),
    );
  }
}

通过上述步骤，你应该能够在自己的Flutter项目中轻松集成并使用 flutter_circular_text 插件来创建独特的圆形文本显示效果。如果你遇到任何问题或有改进建议，请随时访问官方GitHub仓库提交issue或者pull request。