Flutter动画效果插件 animated_neumorphic 的使用

animated_neumorphic 是一个用于创建新拟态风格（Neumorphism）主题容器的Flutter插件。通过该插件，你可以轻松实现具有动画效果的新拟态UI组件。

动画效果示例

开始使用

添加依赖

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

dependencies:
  ...
  animated_neumorphic: "^0.1.0"

导入库

在你的Dart文件中导入该库：

import 'package:animated_neumorphic/animated_neumorphic.dart';

对于Flutter新手，可以参考官方文档来快速上手。

使用方法

下面是一个简单的按钮示例：

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

  [@override](/user/override)
  _NeumorphicButtonState createState() => _NeumorphicButtonState();
}

class _NeumorphicButtonState extends State<NeumorphicButton> {
  bool _isActive = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isActive = !_isActive;
        });
      },
      child: AnimatedNeumorphicContainer(
        depth: _isActive ? 0.0 : 1.0,
        color: Color(0xFFF2F2F2),
        width: 60,
        height: 60,
        radius: 16,
        child: Icon(Icons.access_time),
      ),
    );
  }
}

这是一个更完整的示例demo，它展示了如何在应用中使用 AnimatedNeumorphicContainer 来创建带有滑块控制尺寸和深度的动态新拟态组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _width = 60.0;
  double _height = 60.0;
  double _depth = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      backgroundColor: Color(0xFFF2F2F2),
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(height: 32),
            NeumorphicButton(),
            SizedBox(height: 32),
            AnimatedNeumorphicContainer(
              depth: _depth,
              width: _width,
              height: _height,
              color: Color(0xFFF2F2F2),
              child: Icon(Icons.timeline),
            ),
            SizedBox(height: 16),
            Slider(
              value: _width,
              min: 60,
              max: 180,
              onChanged: (v) {
                setState(() => _width = v);
              },
            ),
            Slider(
              value: _height,
              min: 60,
              max: 180,
              onChanged: (v) {
                setState(() => _height = v);
              },
            ),
            Slider(
              value: _depth,
              min: 0.0,
              max: 1.0,
              onChanged: (v) {
                setState(() => _depth = v);
              },
            ),
          ],
        ),
      ),
    );
  }
}

// 定义一个新拟态按钮
class NeumorphicButton extends StatefulWidget {
  const NeumorphicButton({Key? key}) : super(key: key);

  [@override](/user/override)
  _NeumorphicButtonState createState() => _NeumorphicButtonState();
}

class _NeumorphicButtonState extends State<NeumorphicButton> {
  bool _isActive = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isActive = !_isActive;
        });
      },
      child: AnimatedNeumorphicContainer(
        depth: _isActive ? 0.0 : 1.0,
        color: Color(0xFFF2F2F2),
        width: 60,
        height: 60,
        radius: 16,
        child: Icon(Icons.access_time),
      ),
    );
  }
}