Flutter浮动文本展示插件 `floating_text` 的使用

floating_text 是一个轻量级的Flutter插件，提供了漂亮的浮动文本动画。本文将详细介绍如何在项目中使用这个插件，并提供完整的示例代码。

一、添加依赖

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

dependencies:
  floating_text: ^0.2.0

然后运行 flutter pub get 来安装该插件。

二、导入包

在需要使用 FloatingText 的 Dart 文件中导入包：

import 'package:floating_text/floating_text.dart';

三、基本用法

你可以在任何地方使用 FloatingText 替代普通的 Text 组件。下面是一个简单的例子：

示例1：按钮上的浮动文本

RaisedButton(
  onPressed: () {},
  child: FloatingText(
    text: 'Button',
    repeat: true,
    duration: Duration(milliseconds: 500),
  ),
),

示例2：设置重复动画

FloatingText(
  text: "WELCOME",
  repeat: true,
  duration: Duration(milliseconds: 600),
  floatingTextStyle: TextStyle(
    color: Colors.blue,
    fontSize: 50,
  ),
  textStyle: TextStyle(
    color: Colors.black38,
    fontSize: 60,
  ),
  onAnimationComplete: () {
    // 动画完成后的回调函数
  },
),

示例3：自定义文本样式

FloatingText(
  text: 'Congratulations',
  repeat: true,
  textStyle: TextStyle(
    fontSize: 40,
    color: Colors.black54,
  ),
  floatingTextStyle: TextStyle(
    color: Colors.red,
    fontSize: 40,
    shadows: [
      BoxShadow(
        color: Colors.yellow,
        blurRadius: 10,
      )
    ],
  ),
),

示例4：完整示例

以下是一个更完整的示例，展示了如何在一个页面中使用 FloatingText：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingText Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CustomCardsExample(),
    );
  }
}

class CustomCardsExample extends StatefulWidget {
  [@override](/user/override)
  _CustomCardsExampleState createState() => _CustomCardsExampleState();
}

class _CustomCardsExampleState extends State<CustomCardsExample> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'FloatingText Example',
        ),
      ),
      body: Center(
        child: FloatingText(
          onAnimationComplete: () {
            print('Animation Completed');
          },
          repeat: true,
          repeatCount: 3,
          text: 'Congratulations',
          duration: Duration(milliseconds: 150),
          textStyle: const TextStyle(
            fontSize: 40,
            color: Colors.black54,
          ),
          floatingTextStyle: const TextStyle(
            color: Colors.red,
            fontSize: 50,
            shadows: [
              BoxShadow(
                color: Colors.yellow,
                blurRadius: 10,
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter浮动文本展示插件floating_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•1 天前

更多关于Flutter浮动文本展示插件floating_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用floating_text插件来展示浮动文本的示例代码。这个示例假设你已经在你的pubspec.yaml文件中添加了floating_text依赖，并且已经运行了flutter pub get来安装它。

首先，确保你的pubspec.yaml中包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  floating_text: ^最新版本号  # 替换为实际可用的最新版本号

然后，你可以在你的Flutter应用中这样使用floating_text插件：

1. 导入必要的包

在你的Dart文件中（例如main.dart），导入floating_text包：

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

2. 创建主应用

接下来，在你的主应用中创建一个使用FloatingText的示例：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FloatingTextExample(),
    );
  }
}

class FloatingTextExample extends StatefulWidget {
  @override
  _FloatingTextExampleState createState() => _FloatingTextExampleState();
}

class _FloatingTextExampleState extends State<FloatingTextExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Floating Text Example'),
      ),
      body: Center(
        child: FloatingText(
          text: 'Hello, Floating Text!',
          style: TextStyle(fontSize: 24, color: Colors.white),
          animationController: _controller,
          animationDuration: const Duration(seconds: 1),
          initialOffset: Offset(0, -1.5), // 初始偏移量
          curve: Curves.easeInOutQuad,
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.black.withOpacity(0.5),
          ),
        ),
      ),
    );
  }
}

解释

导入包：首先导入flutter和floating_text包。
创建主应用：在MyApp中设置基本的Material应用结构。
创建示例页面：在FloatingTextExample中，使用StatefulWidget来管理动画状态。
初始化动画控制器：在initState中初始化AnimationController，并设置动画持续时间和重复行为。
释放资源：在dispose中释放动画控制器资源。
构建UI：在build方法中，使用FloatingText小部件来展示浮动文本。你可以自定义文本内容、样式、动画控制器、动画持续时间、初始偏移量和动画曲线。

这个示例展示了如何使用floating_text插件来创建一个简单的浮动文本效果。你可以根据需要进一步调整动画参数和样式来适应你的应用需求。

Flutter浮动文本展示插件floating_text的使用

Flutter浮动文本展示插件 floating_text 的使用