Flutter 3D文本渲染插件text_3d的使用

Flutter 3D文本渲染插件text_3d的使用

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  text_3d: latest_version

然后运行命令安装依赖：

flutter pub get

使用

要使用 ThreeDText 组件，请按照以下步骤操作：

1. 导入 text_3d 库：

   import 'package:text_3d/text_3d.dart';
   

2. 创建一个 ThreeDText 组件实例，并设置所需的属性，如文本、字体样式、深度等。

可用的样式

• standard: 基本的3D效果。
• raised: 文字从背景突出显示。
• inset: 文字嵌入到背景中。
• perspectiveRaised: 具有抬升视角的效果。
• perspectiveInset: 具有压入视角的效果。
• perspectiveLeft: 文字向左倾斜。
• perspectiveRight: 文字向右倾斜。

示例

下面是一个使用 text_3d 插件的示例代码，展示了如何创建不同的3D文本效果。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:text_3d/text_3d.dart';

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ThreeDText(
            text: 'perspectiveRaised',
            textStyle: TextStyle(fontSize: 40, color: Colors.green),
            depth: 10,
            style: ThreeDStyle.perspectiveRaised,
            angle: pi / 6,
            perspectiveDepth: 30,
          ),
          ThreeDText(
            text: 'perspectiveInset',
            textStyle: TextStyle(fontSize: 40, color: Colors.purpleAccent),
            depth: 40,
            style: ThreeDStyle.perspectiveInset,
            angle: pi / 6,
            perspectiveDepth: 2,
          ),
          ThreeDText(
            text: 'perspectiveRight',
            textStyle: TextStyle(fontSize: 25, color: Colors.yellow),
            style: ThreeDStyle.perspectiveLeft,
            perspectiveDepth: 45.0,
          ),
          ThreeDText(
            text: 'perspectiveLeft',
            textStyle: const TextStyle(
                fontSize: 25, color: Colors.pink, fontWeight: FontWeight.bold),
            depth: 6,
            style: ThreeDStyle.perspectiveLeft,
            perspectiveDepth: -45.0,
          ),
          ThreeDText(
            text: "inset",
            textStyle: TextStyle(
              fontSize: 64,
              color: Colors.pinkAccent,
            ),
            style: ThreeDStyle.inset,
          ),
          ThreeDText(
            text: 'raised',
            textStyle: TextStyle(fontSize: 64, color: Colors.blue),
            depth: 10,
            style: ThreeDStyle.raised,
          ),
          ThreeDText(
            text: 'standard',
            textStyle: TextStyle(fontSize: 40, color: Colors.blue),
            depth: 5,
            style: ThreeDStyle.standard,
          ),
          ThreeDText(
            text: 'inset with angle',
            textStyle: TextStyle(fontSize: 40, color: Colors.deepOrange),
            depth: 5,
            style: ThreeDStyle.inset,
            angle: 70,
            // 30 degrees
          ),
        ],
      )),
    );
  }
}