Flutter动画输入框边框插件animated_input_border的使用

Flutter动画输入框边框插件animated_input_border的使用

AnimatedInputBorder 是一个用于 Flutter 的包，可以为文本字段提供可自定义的动画边框。该插件通过用户交互（例如聚焦或输入变化）来实现平滑过渡效果，从而增强用户界面设计。

关键特性

• 当文本字段获得或失去焦点时，边框可以进行动画。
• 可以自定义边框半径、宽度和颜色。
• 支持间隙填充，以便适应浮动标签或缺口。
• 使用 AnimationController 实现平滑且视觉上吸引人的动画效果。
• 无缝集成到 TextFormField 和 InputDecoration 中。

入门指南 🔥

首先，在你的项目中添加 animated_input_border 作为依赖项。

dependencies:
  animated_input_border: <latest_version>

运行以下命令以获取依赖项：

$ flutter pub get

在 Dart 代码中导入它：

import 'package:animated_input_border/animated_input_border.dart';

接下来，你可以使用 AnimatedInputBorder 来创建具有动画效果的输入框边框。

TextFormField(
  focusNode: focusNode,
  decoration: InputDecoration(
    label: const Text("Focused Border Animation"),
    border: const OutlineInputBorder(),
    focusedBorder: AnimatedInputBorder(
      animationValue: _animationFocusedBorder.value, // 创建动画控制器
      borderRadius: BorderRadius.circular(20.0),
      borderSide: const BorderSide(
        width: 2,
        color: Colors.deepPurple,
      )),
    hintText: "Enter value"),
);

其他示例 🤯

你还可以尝试缩放动画。开发者可以自行尝试。以下是代码片段：

TextFormField(
  focusNode: focusNode,
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    focusedBorder: AnimatedInputBorder(
      borderRadius: BorderRadius.circular(20.0),
      borderSide: const BorderSide(
        width: 3,
        color: Colors.green,
      )).scale(_animationFocusedBorder.value),
    hintText: "Enter value"),
);

贡献

欢迎贡献、提出问题和功能请求！请查看 GitHub 仓库。

作者

由 Pranim S. Thakuri 用心开发。

示例代码

以下是完整的示例代码，展示了如何使用 AnimatedInputBorder 插件。

import 'package:animated_input_border/animated_input_border.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: 'Flutter Animated TextField',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedInputBorderExample(),
          AnimatedInputFocusedBorderExample(),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  State<AnimatedInputBorderExample> createState() => _AnimatedInputBorderExampleState();
}

class _AnimatedInputBorderExampleState extends State<AnimatedInputBorderExample> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );

    // 启动动画以响应小部件渲染
    _animationController.forward();
  }

  [@override](/user/override)
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return TextFormField(
            decoration: InputDecoration(
              hintText: "Simple Border animation",
              border: AnimatedInputBorder(
                animationValue: _animationController.value,
              ),
            ),
          );
        },
      ),
    );
  }
}

// 这个示例使用 AnimationController 动画文本字段的聚焦边框。
// 边框在输入字段获得或失去焦点时动态更改其样式（例如，半径、宽度）。

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

  [@override](/user/override)
  State<AnimatedInputFocusedBorderExample> createState() => _AnimatedInputFocusedBorderExampleState();
}

class _AnimatedInputFocusedBorderExampleState extends State<AnimatedInputFocusedBorderExample> with SingleTickerProviderStateMixin {
  late AnimationController _animationFocusedBorder;
  late FocusNode focusNode;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 为聚焦边框示例设置焦点节点
    focusNode = FocusNode();

    // 为聚焦边框示例创建动画控制器
    _animationFocusedBorder = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );

    // 监听器函数，当边框聚焦时执行动画
    _animateBorderOnFocusChange();
  }

  // 根据焦点状态的变化动画边框
  void _animateBorderOnFocusChange() {
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        _animationFocusedBorder.forward();
      } else {
        _animationFocusedBorder.value = 0.0;
      }
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _animationFocusedBorder.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: AnimatedBuilder(
        animation: _animationFocusedBorder,
        builder: (context, child) {
          return TextFormField(
            focusNode: focusNode,
            decoration: InputDecoration(
              border: const OutlineInputBorder(),
              focusedBorder: AnimatedInputBorder(
                borderRadius: BorderRadius.circular(20.0),
                borderSide: const BorderSide(
                  width: 3,
                  color: Colors.green,
                )).scale(_animationFocusedBorder.value),
              hintText: "Enter value",
            ),
          );
        },
      ),
    );
  }
}