在移动应用开发中，经常会遇到需要展示滚动文本的场景，比如新闻标题、公告等。Flutter作为一款快速、流畅、跨平台的UI工具，提供了各种插件来简化开发过程。其中，flutter_marquee插件是一个简单易用的垂直跑马灯插件，可以帮助我们实现滚动文本的效果。

1. 引入flutter_marquee插件

首先，我们需要在pubspec.yaml文件中添加flutter_marquee插件的依赖：

dependencies:
  flutter_marquee: ^1.1.0

然后，运行flutter packages get命令来获取最新的插件包。

2. 创建垂直跑马灯组件

接下来，我们需要创建一个垂直跑马灯组件，用于展示滚动的文本。在Flutter中，可以使用ListView来实现垂直滚动效果。我们可以将ListView作为容器，再在其中添加多个MarqueeWidget，每个MarqueeWidget对应一个滚动文本项。

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

class Marquee extends StatelessWidget {
  final List<String> texts;

  Marquee({required this.texts});

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      children: texts.map((text) => MarqueeWidget(child: Text(text))).toList(),
    );
  }
}

3. 使用垂直跑马灯组件

最后，我们可以在需要展示滚动文本的地方，使用我们自定义的垂直跑马灯组件。

class HomeScreen extends StatelessWidget {
  final List<String> texts = ['Hello', 'World', 'Flutter'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('垂直跑马灯'),
      ),
      body: Center(
        child: Marquee(texts: texts),
      ),
    );
  }
}

在上述代码中，我们创建了一个包含三个文本项的垂直跑马灯组件，并将其置于中心位置。你可以根据实际需求，自定义文本内容和样式。

总结

使用flutter_marquee插件，我们可以轻松实现垂直跑马灯效果，为应用添加更加丰富的交互体验。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言讨论。谢谢阅读！

本文来自极简博客，作者：移动开发先锋，转载请注明原文链接：Flutter实现垂直跑马灯效果：使用flutter_marquee插件