Flutter中的动画背景

Flutter的动画背景可以轻松扩展以在画布上绘制您想要的任何内容。在本文中，我们将制作带有气泡的动画背景。下面给出了一个示例视频，以了解我们将在本文中做什么。

安装

将依赖项添加到pubspec.yaml文件中。

dependencies:
 animated_background: ^2.0.0

使用语法

创建粒子选项：

Dart

// Defining Particles for animation.
ParticleOptions particles = const ParticleOptions(
    baseColor: Colors.cyan,
    spawnOpacity: 0.0,
    opacityChangeRate: 0.25,
    minOpacity: 0.1,
    maxOpacity: 0.4,
    particleCount: 70,
    spawnMaxRadius: 15.0,
    spawnMaxSpeed: 100.0,
    spawnMinSpeed: 30,
    spawnMinRadius: 7.0,
  );

将小部件添加到正文：

Dart

// AnimatedBackground widget
AnimatedBackground(
          vsync: this,
          behaviour: RandomParticleBehaviour(options: particles),
          child: Center(
              child: Text(
            "Hello this is Random Animated Background",
            style: TextStyle(fontSize: 50),
          )),
        ),

代码示例

Dart

import 'package:animated_background/animated_background.dart';
import 'package:flutter/material.dart';
  
// main class calling to 
// the MyAnimatedBackground.
void main() {
  runApp(MyAnimatedBackground());
}
  
// MyAnimatedBackground class is stateful class.
class MyAnimatedBackground extends StatefulWidget {
  MyAnimatedBackground({Key? key}) : super(key: key);
  
  @override
  State createState() => _MyAnimatedBackgroundState();
}
  
class _MyAnimatedBackgroundState extends State
    with SingleTickerProviderStateMixin {
  // defination of ParticlesOptions.
  ParticleOptions particles = const ParticleOptions(
    baseColor: Colors.cyan,
    spawnOpacity: 0.0,
    opacityChangeRate: 0.25,
    minOpacity: 0.1,
    maxOpacity: 0.4,
    particleCount: 70,
    spawnMaxRadius: 15.0,
    spawnMaxSpeed: 100.0,
    spawnMinSpeed: 30,
    spawnMinRadius: 7.0,
  );
  @override
  Widget build(BuildContext context) {
    // return MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Animated Background"),
        ),
        // In body we have a AnimatedBackgound,
        // behavior RandomParticleBehaviour.
        body: AnimatedBackground(
          // vsync uses singleTicketProvider state mixin.
          vsync: this, 
          behaviour: RandomParticleBehaviour(options: particles),
          child: Center(
              child: Text(
            // center text
            "Hello this is Random Animated Background", 
            style: TextStyle(fontSize: 50),
          )),
        ),
      ),
    );
  }
}

解释

• main 是用于在启动时运行MyAnimatedBackground类的主要方法。
• 创建类MyAnimatedBackground是一个有状态的小部件。
• 使用给定的选项创建ParticleOptions变量粒子。
• 由于flutter基于小部件，我们需要创建一个。
• 返回的MaterialApp作为 home Scaffold 允许使用 body 和外观。
• 作为一个采用动画背景的主体，它采用我们创建的粒子行为，
• Vsync播放动画并作为子中心。
• 中心有一个带有文本的文本小部件。

输出