Flutter 文字特效之跑马灯

Android

2023-11-19 03:28:18

Flutter 开发指南：创建滚动跑马灯动画

什么是跑马灯？

跑马灯是一种常见的动画效果，用于滚动显示文本或图像。它吸引眼球，可用于传达信息，提升用户体验。

使用 Flutter 创建简单跑马灯

步骤：

创建 Flutter 项目： 创建一个新项目，并创建一个新的 Dart 文件。
创建 StatefulWidget： 定义一个名为 MarqueeWidget 的 StatefulWidget。
创建 State： 在 createState() 方法中创建 MarqueeState 对象。
构建 AnimatedBuilder： 在 build() 方法中，创建一个 AnimatedBuilder 小部件。
设置 Container： 在 AnimatedBuilder 中创建 Container 小部件，用于包含文本。
添加 Text： 在 Container 中创建 Text 小部件，设置文本内容和样式。
配置 AnimationController： 创建 AnimationController 对象，并设置其 duration。
添加 StatusListener： 向 AnimationController 添加 StatusListener，在完成时重置它。
启动动画： 调用 AnimationController 的 start() 方法。

代码示例：

import 'package:flutter/material.dart';

class MarqueeWidget extends StatefulWidget {
  final String text;
  final TextStyle style;

  MarqueeWidget({required this.text, required this.style});

  @override
  _MarqueeState createState() => _MarqueeState();
}

class _MarqueeState extends State<MarqueeWidget> {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 5),
    vsync: this,
  )..repeat();

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (_, child) => Container(
        child: Text(
          widget.text,
          style: widget.style,
        ),
      ),
    );
  }
}