Flutter动画浮动组件插件animated_floating_widget的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter动画浮动组件插件animated_floating_widget的使用

介绍

animated_floating_widget 是一个可自定义的、带有动画效果的浮动组件插件，适用于Flutter应用。它可以帮助你轻松创建具有动画效果的浮动窗口或按钮。

开始使用

添加依赖

在你的Flutter项目的 pubspec.yaml 文件中，添加以下依赖：

dependencies:
  ...
  animated_floating_widget: <latest_version>

请将 <latest_version> 替换为最新版本号。

导入包

在你的Dart文件中，添加以下导入语句：

import 'package:animated_floating_widget/animated_floating_widget.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 animated_floating_widget 插件来创建一个带有动画效果的浮动组件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating Widget',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const FloatingWidgetExample(),
    );
  }
}

class FloatingWidgetExample extends StatelessWidget {
  const FloatingWidgetExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Floating Widget'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: FloatingWidget(
              // 设置浮动组件与顶部的距离
              verticalSpace: 20,
              
              // 设置动画持续时间
              duration: const Duration(seconds: 3),
              
              // 设置反向动画持续时间
              reverseDuration: const Duration(seconds: 1),
              
              // 浮动组件的内容
              child: Container(
                width: 200,
                height: 60,
                decoration: BoxDecoration(
                  color: const Color(0xff27374D),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Center(
                  child: Text(
                    "Floating widget",
                    style: TextStyle(fontSize: 15, color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用animated_floating_widget插件的详细代码示例。这个插件允许你在应用中创建动画效果的浮动组件。

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

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

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

接下来是一个完整的示例，展示了如何使用animated_floating_widget来创建一个带有动画效果的浮动按钮：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Floating Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Floating Widget Demo'),
        ),
        body: Center(
          child: FloatingWidgetDemo(),
        ),
      ),
    );
  }
}

class FloatingWidgetDemo extends StatefulWidget {
  @override
  _FloatingWidgetDemoState createState() => _FloatingWidgetDemoState();
}

class _FloatingWidgetDemoState extends State<FloatingWidgetDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

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

    _animation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(0.5, 0.5),
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedFloatingWidget(
      animation: _animation,
      child: FloatingActionButton(
        onPressed: () {
          // 处理按钮点击事件
          print("FloatingActionButton clicked!");
        },
        tooltip: 'Click Me',
        child: Icon(Icons.add),
      ),
      // 浮动组件的初始位置
      initialPosition: AnimatedFloatingWidgetPosition.bottomRight,
      // 浮动组件的显示动画类型
      floatingType: AnimatedFloatingWidgetType.slide,
      // 浮动组件消失时的动画类型
      disappearingType: AnimatedFloatingWidgetType.fade,
      // 浮动组件的显示和隐藏条件
      show: true, // 你可以根据某些条件动态设置这个值
    );
  }
}

代码说明：

  1. 依赖导入：

    • 导入flutter/material.dart和animated_floating_widget/animated_floating_widget.dart。

  2. 应用入口：

    • MyApp是应用的根组件，使用MaterialApp包装整个应用。

  3. 浮动组件演示：

    • FloatingWidgetDemo是一个有状态的组件，用于演示浮动组件的使用。
    • 在initState中初始化动画控制器和动画。
    • 在dispose中释放动画控制器资源。
    • build方法中返回AnimatedFloatingWidget，并配置其动画、子组件（一个浮动按钮）、初始位置、显示和隐藏动画类型以及显示条件。

这个示例展示了如何创建并控制一个带有动画效果的浮动按钮。你可以根据需要调整动画参数、位置以及显示条件等。

回到顶部