Flutter动画提示输入框插件animated_hint_textfield的使用

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

Flutter动画提示输入框插件animated_hint_textfield的使用

插件简介

pub package pub points

Animated Hint TextField 是一个Flutter包，旨在为文本字段的标签/提示文本添加动画效果，向用户提供关于应输入什么内容的建议性指导。你可以尝试我们的 示例应用程序。

平台支持

平台 支持情况
Android ✅
iOS ✅
MacOS ✅
Web ✅
Linux ✅
Windows ✅

安装步骤

1. 依赖它

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  animated_hint_textfield: ^1.0.0

2. 安装它

你可以通过命令行安装包：

  • 使用 pub:
    $ pub get
  • 使用 flutter:
    $ flutter pub get

3. 导入它

现在，在你的 Dart 代码中可以使用如下导入语句：

import 'package:animated_hint_textfield/animated_hint_textfield.dart';

动画类型

当前这个包支持三种动画类型，未来会增加更多动画。

Slide（滑动）

AnimatedTextField(
  animationType: Animationtype.slide, // 使用 Animationtype.slide 实现滑动动画
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(4),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 2),
      borderRadius: BorderRadius.circular(4),
    ),
    contentPadding: EdgeInsets.all(12),
  ),
  hintTexts: [
    'Search for "Bengaluru"',
    'Search for "Mumbai"',
    'Search for "Chennai"',
  ],
);

Fade（淡入淡出）

AnimatedTextField(
  animationType: Animationtype.fade, // 使用 Animationtype.fade 实现淡入淡出动画
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    border: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(4),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 2),
      borderRadius: BorderRadius.circular(4),
    ),
    contentPadding: EdgeInsets.all(12),
  ),
  hintTexts: [
    'Search for "Bengaluru"',
    'Search for "Mumbai"',
    'Search for "Chennai"',
  ],
);

Typer（打字机风格）

AnimatedTextField(
  animationType: Animationtype.typer, // 使用 Animationtype.typer 实现打字机风格动画
  hintTextStyle: const TextStyle(
    color: Colors.deepPurple,
    overflow: TextOverflow.ellipsis,
  ),
  hintTexts: const [
    'How is the weather today?',
    'Will it rain today?',
    'What is the temperature',
  ],
  decoration: InputDecoration(
    suffixIcon: const Icon(Icons.search),
    filled: true,
    border: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.red, width: 2),
      borderRadius: BorderRadius.circular(25),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.black, width: 2),
      borderRadius: BorderRadius.circular(25),
    ),
    contentPadding: const EdgeInsets.all(12),
  ),
);

示例Demo

下面是一个完整的示例，展示了如何将这些动画应用到实际项目中：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Animated Hint Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                const Text(
                  "Slide Animation",
                  style: TextStyle(color: Colors.deepPurple),
                ),
                AnimatedTextField(
                    decoration: InputDecoration(
                      prefixIcon: const Icon(Icons.search),
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.red, width: 2),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.black, width: 2),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      contentPadding: const EdgeInsets.all(12),
                    ),
                    animationType: Animationtype.slide,
                    hintTexts: const [
                      'Search for "Bengaluru"',
                      'Search for "Mumbai"',
                      'Search for "Chennai"',
                    ]),
                const Text(
                  "\n\n\nFade Animation",
                  style: TextStyle(color: Colors.deepPurple),
                ),
                AnimatedTextField(
                  animationType: Animationtype.fade,
                  hintTextStyle: const TextStyle(
                      color: Colors.deepPurple,
                      overflow: TextOverflow.ellipsis),
                  hintTexts: const [
                    'How is the weather today?',
                    'Will it rain today?',
                    'What is the temperature',
                  ],
                  decoration: InputDecoration(
                    suffixIcon: const Icon(Icons.search),
                    filled: true,
                    border: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.red, width: 2),
                      borderRadius: BorderRadius.circular(25),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.black, width: 2),
                      borderRadius: BorderRadius.circular(25),
                    ),
                    contentPadding: const EdgeInsets.all(12),
                  ),
                ),
                const Text(
                  "\n\n\n\nTyper Animation",
                  style: TextStyle(color: Colors.deepPurple),
                ),
                AnimatedTextField(
                  animationType: Animationtype.typer,
                  hintTexts: const [
                    'Search "Flutter"',
                    'Search "Dart"',
                    'Search "Animated Hint TextField"',
                  ],
                ),
                const SizedBox(
                  height: 50,
                ),
                AnimatedTextField(
                  hintTextStyle: const TextStyle(color: Colors.deepPurple),
                  enabled: false,
                  hintTexts: const [
                    'Pay friends and merchants',
                    'Pay by number or UPI ID',
                    'Pay by account number'
                  ],
                  decoration: const InputDecoration(
                    border: InputBorder.none,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

希望这个指南对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter动画提示输入框插件animated_hint_textfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画提示输入框插件animated_hint_textfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 animated_hint_textfield 插件的示例代码。animated_hint_textfield 是一个 Flutter 插件，用于在输入框中显示动画提示，以增强用户体验。

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

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

然后运行 flutter pub get 来获取依赖。

以下是一个简单的示例，展示如何使用 animated_hint_textfield：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Hint TextField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Hint TextField Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedHintTextFieldDemo(),
        ),
      ),
    );
  }
}

class AnimatedHintTextFieldDemo extends StatefulWidget {
  @override
  _AnimatedHintTextFieldDemoState createState() => _AnimatedHintTextFieldDemoState();
}

class _AnimatedHintTextFieldDemoState extends State<AnimatedHintTextFieldDemo> {
  final TextEditingController _controller = TextEditingController();
  String _hintText = "请输入您的邮箱地址";

  @override
  Widget build(BuildContext context) {
    return AnimatedHintTextField(
      controller: _controller,
      hint: _hintText,
      hintStyle: TextStyle(color: Colors.grey),
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: '邮箱',
      ),
      onChanged: (value) {
        // 监听输入框内容变化
        if (value.isNotEmpty) {
          setState(() {
            _hintText = ""; // 清空提示信息
          });
        } else if (value.isEmpty && _hintText.isEmpty) {
          setState(() {
            _hintText = "请输入您的邮箱地址"; // 当输入框为空时恢复提示信息
          });
        }
      },
    );
  }

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

在这个示例中，我们创建了一个简单的 Flutter 应用，并在其中使用了 AnimatedHintTextField。以下是一些关键点：

  1. AnimatedHintTextField 构造函数：接受多个参数，包括 controller、hint、hintStyle 和 decoration。
  2. controller：用于控制输入框的内容。
  3. hint：输入框中的提示文本。
  4. hintStyle：提示文本的样式。
  5. decoration：输入框的装饰，例如边框和标签文本。
  6. onChanged：输入框内容变化时的回调。在这个示例中，我们用它来管理提示信息的显示和隐藏。

请注意，由于 animated_hint_textfield 插件的具体实现和 API 可能会随着版本更新而变化，因此建议查阅最新的官方文档和示例代码以获取最佳实践。

回到顶部