Flutter动态弹跳文本插件flutter_bouncing_text的使用

简介

flutter_bouncing_text 是一个用于在 Flutter 应用中创建浪漫弹跳文本的包。它将有助于使您的应用更加生动有趣。

示例

示例代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Romantic Developer'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              AnimatedBouncingText(
                text: 'I am\nRomantic Developer.',
                mode: BouncingTextModes.sequenceOneTime,
                textAlign: TextAlign.center,
                characterDuration: const Duration(seconds: 1),
                characterDelay: const Duration(milliseconds: 300),
                textStyle: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
                onEnd: () {
                  print('_HomeState.build.onEnd.$index');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

动态示例

动态示例代码

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

const _kColors = [
  Color(0xff4D4DFF),
  Color(0xff2c85b7),
  Color(0xff693480),
];

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var characterDuration = Duration(seconds: 1);
  var characterDelay = Duration(seconds: 1);
  var textAlign = TextAlign.start;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Romantic Developer'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  children: [
                    Text(
                      'Text Align',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Wrap(
                      children: [
                        ...TextAlign.values.map(
                          (e) => Row(
                            children: [
                              Radio<TextAlign>(
                                value: e,
                                groupValue: textAlign,
                                onChanged: (TextAlign? value) {
                                  if (value != null) {
                                    setState(() {
                                      textAlign = value;
                                    });
                                  }
                                },
                              ),
                              Text(
                                e.name,
                                style: TextStyle(
                                  fontSize: 14,
                                ),
                              ),
                            ],
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center,
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Text(
                      'Character Duration',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Slider(
                      value: characterDuration.inMilliseconds / 1000.0,
                      min: 1,
                      max: 3,
                      divisions: 10,
                      onChanged: (e) => setState(() {
                        characterDuration = Duration(milliseconds: (e * 1000).toInt());
                      }),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Text(
                      'Character Delay',
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Slider(
                      value: characterDelay.inMilliseconds.toDouble(),
                      min: 100,
                      max: 3000,
                      divisions: 20,
                      onChanged: (e) => setState(() {
                        characterDelay = Duration(milliseconds: e.toInt());
                      }),
                    ),
                  ],
                ),
              ),
              ...BouncingTextModes.values.map(
                (e) {
                  final index = BouncingTextModes.values.indexOf(e);
                  return Column(
                    children: [
                      Text(
                        e.name,
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Container(
                        color: _kColors[index],
                        padding: const EdgeInsets.all(20.0),
                        child: AnimatedBouncingText(
                          key: ValueKey(DateTime.now()),
                          text: '($index) I am\nRomantic Developer.',
                          mode: e,
                          textAlign: textAlign,
                          characterDuration: characterDuration,
                          characterDelay: characterDelay,
                          textStyle: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 22,
                          ),
                          onEnd: () {
                            print('_HomeState.build.onEnd.$index');
                          },
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                    ],
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

运行效果

使用说明

导入包：在 pubspec.yaml 文件中添加依赖项：
```
dependencies:
  flutter_bouncing_text: ^x.x.x
```

更多关于Flutter动态弹跳文本插件flutter_bouncing_text的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

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

当然，我可以为你提供一个关于如何使用flutter_bouncing_text插件的示例代码。这个插件允许你在Flutter应用中创建动态弹跳文本效果。以下是一个简单的示例，展示了如何集成和使用这个插件。

首先，确保你已经在pubspec.yaml文件中添加了flutter_bouncing_text依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_bouncing_text: ^最新版本号  # 请替换为实际最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用flutter_bouncing_text插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bouncing Text Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Bouncing Text Demo'),
        ),
        body: Center(
          child: BouncingText(
            text: 'Hello, Bouncing Text!',
            style: TextStyle(fontSize: 24, color: Colors.black),
            bounceFactor: 1.2, // 弹跳因子，值越大弹跳越明显
            bounceDuration: Duration(milliseconds: 800), // 弹跳周期
            animationCurve: Curves.easeInOut, // 动画曲线
          ),
        ),
      ),
    );
  }
}

在这个示例中：

我们首先导入了必要的包：flutter/material.dart和flutter_bouncing_text/flutter_bouncing_text.dart。
创建了一个简单的MyApp应用，其中包含一个Scaffold，在Scaffold的body中放置了一个居中的Center组件。
在Center组件中，我们使用了BouncingText小部件，并传递了以下参数：
- text：要显示的文本。
- style：文本的样式，包括字体大小和颜色。
- bounceFactor：弹跳因子，用于控制弹跳的高度。值越大，弹跳越明显。
- bounceDuration：每次弹跳动画的持续时间。
- animationCurve：动画曲线，用于控制动画的速度变化。

运行这个示例应用，你会看到一个带有弹跳效果的文本。

请注意，flutter_bouncing_text插件的具体API可能会随着版本更新而变化，因此建议查阅最新的官方文档或插件仓库以获取最新的使用指南和API参考。