Flutter动画背景效果插件animated_hover_background的使用

Flutter动画背景效果插件animated_hover_background的使用

Hey Folks,

很高兴与大家分享我的第一个开源贡献！通过我们的动画小部件让您的仪表板更加生动。我们的动画背景由经验丰富的设计师和动画师创建，确保每个动画既视觉上令人印象深刻又技术上稳健。

特性

开始使用

在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  animated_hover_background: any

使用方法

在您的应用中使用 AnimatedHoverBackground 小部件来包裹需要动画背景的组件。例如：

AnimatedHoverBackground(YourWidget());

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 AnimatedHoverBackground 插件。

import 'dart:ui';

import 'package:animated_hover_background/animated_hover_background.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

// 自定义页面
class Home_Dash_Screen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("主页"),
    );
  }
}

// 自定义日历页面
class CustomCalender extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("日历"),
    );
  }
}

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

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

  // 这个小部件是您的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String pageName = 'home';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedHoverBackground(
      Scaffold(
        backgroundColor: Colors.transparent,
        body: pageName == "home" ? Home_Dash_Screen() : CustomCalender(),
        bottomNavigationBar: Stack(
          children: [
            Container(
              height: 50,
              width: MediaQuery.of(context).size.width,
              margin: const EdgeInsets.only(bottom: 20, right: 12, left: 12),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.white24,
                  border: Border.all(color: Colors.grey.shade200)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                      onTap: () {
                        pageName = 'home';
                        setState(() {});
                      },
                      child: const Icon(Icons.dashboard_customize_outlined)),
                  GestureDetector(
                      onTap: () {
                        pageName = 'calender';
                        setState(() {});
                      },
                      child: const Icon(Icons.calendar_month)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}