Flutter文本装饰插件decorated_text的使用

decorated_text 是一个强大的Flutter插件，可以让你轻松地为文本添加各种装饰效果，如边框、渐变填充和阴影等。这个插件还支持Google字体，并且能够跟随缩放和旋转等变换。

功能亮点

• 边框与渐变：你可以为文本添加边框和渐变填充。
• 阴影效果：可以为文本添加阴影效果。
• Google字体支持：支持Google字体，并且可以在IDE中自动补全字体名称。
• 变换支持：支持缩放、旋转等变换操作。

使用示例

基本用法

以下是一个简单的示例，展示了如何使用 DecoratedText 来创建带有边框、渐变填充和阴影的文本：

import 'package:flutter/material.dart';
import 'package:decorated_text/decorated_text.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: DecoratedText(
            'Decorated Text',
            borderColor: Colors.amber,
            borderWidth: 3,
            fontSize: 40,
            fontWeight: FontWeight.w800,
            shadows: [
              Shadow(color: Colors.black, blurRadius: 4, offset: Offset(4, 4))
            ],
            fillGradient: LinearGradient(colors: [Colors.blue, Colors.red]),
          ),
        ),
      ),
    );
  }
}

使用Google字体

如果你想使用Google字体，可以使用 DecoratedGoogleFontText 组件。以下是一个示例：

import 'package:flutter/material.dart';
import 'package:decorated_text/decorated_text.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: DecoratedGoogleFontText(
            'Decorated Google Font',
            fontMethod: GoogleFonts.rancho,
            fontSize: 40,
            fontWeight: FontWeight.w800,
            borderWidth: 1.5,
            borderColor: Colors.yellow[800],
            shadows: const [
              Shadow(color: Colors.black, blurRadius: 4, offset: Offset(4, 4))
            ],
            fillGradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0.2, 0.55, 0.55, 0.75],
              colors: [
                Colors.white,
                Colors.yellow[500]!,
                Colors.yellow[800]!,
                Colors.yellow[500]!
              ],
            ),
          ),
        ),
      ),
    );
  }
}

完整示例

下面是一个完整的示例，展示了如何在一个应用中同时使用 DecoratedText 和 DecoratedGoogleFontText：

import 'package:flutter/material.dart';
import 'package:decorated_text/decorated_text.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Decorated Text Example')),
        body: Center(
          child: Transform.scale(
            scale: 2,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DecoratedText(
                  'Decorated Text',
                  fontSize: 40,
                  fontWeight: FontWeight.w600,
                  fillColor: Colors.teal,
                  borderWidth: 1,
                ),
                DecoratedText(
                  'Decorated Text',
                  borderColor: Colors.amber,
                  borderWidth: 3,
                  fontSize: 40,
                  fontWeight: FontWeight.w800,
                  shadows: [
                    Shadow(color: Colors.black, blurRadius: 4, offset: Offset(4, 4))
                  ],
                  fillGradient: LinearGradient(colors: [Colors.blue, Colors.red]),
                ),
                DecoratedGoogleFontText(
                  'Decorated Google Font',
                  fontMethod: GoogleFonts.rancho,
                  fontSize: 40,
                  fontWeight: FontWeight.w800,
                  borderWidth: 1.5,
                  borderColor: Colors.yellow[800],
                  shadows: const [
                    Shadow(color: Colors.black, blurRadius: 4, offset: Offset(4, 4))
                  ],
                  fillGradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    stops: const [0.2, 0.55, 0.55, 0.75],
                    colors: [
                      Colors.white,
                      Colors.yellow[500]!,
                      Colors.yellow[800]!,
                      Colors.yellow[500]!
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

通过以上示例，你可以看到 decorated_text 插件的强大功能和灵活性。希望这些示例能帮助你更好地理解和使用这个插件。