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

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

简介

custom_animated_hint_textfield 是一个增强文本输入框的Flutter包，通过动态且视觉效果良好的动画来提升用户体验。你可以创建如循环滚动、滑动、缩放、淡入淡出等多种动画效果，并根据应用需求进行自定义设计和行为。

特性

  • 动画提示文本：轻松添加动态动画提示到文本字段。
  • 多种动画类型：包括循环滚动、滑动、缩放、淡入淡出等动画效果。
  • 可定制的设计：可以自定义提示文本样式、动画时长等属性。
  • 静态和动画提示：支持静态提示文本和动画提示文本切换。
  • 跨平台兼容性：完全支持iOS、Android和Web平台。

安装

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

dependencies:
  custom_animated_hint_textfield: ^latest_version

然后运行 flutter pub get 来获取该包，并在 Dart 文件中导入：

import 'package:custom_animated_hint_textfield/custom_animated_hint_textfield.dart';

使用示例

示例1：CircularAnimatedHintTextField

这是一个带有动画提示的文本输入框组件示例：

CircularAnimatedHintTextField(
  prefixIcon: Icon(Icons.search_off_rounded, color: Colors.purple), 
  suffixIcon: Icon(Icons.access_time_filled, color: Colors.purple),
  staticHintText: "Search food...",  
  staticHintTextStyle: TextStyle(color: Colors.grey, fontSize: 14),  
  hints: [
    "Burger Delights 🍔",
    "Pizza Heaven 🍕",
    "Sweet Treats 🍰",
    "Noodles Galore 🍜",
    "Taco Time 🌯",
    "Fries Galore 🍟",
  ],
  animatedHintTextStyle: TextStyle(fontSize: 14, color: Colors.black, fontWeight: FontWeight.bold),
)

如果你不想使用静态提示文本，可以省略 staticHintText 和 staticHintTextStyle 属性，只显示动画提示文本。

示例2：AnimatedHintTextField

动画类型选择

hintAnimationType: HintAnimationType.fade,
hintAnimationType: HintAnimationType.slide,
hintAnimationType: HintAnimationType.scale,
hintAnimationType: HintAnimationType.slideFromTop,
hintAnimationType: HintAnimationType.slideFromBottom,
hintAnimationType: HintAnimationType.topToBottom,
hintAnimationType: HintAnimationType.bottomToTop,

以下是带有静态文本和动画提示的 AnimatedHintTextField 组件示例：

AnimatedHintTextField(
  animateHintText: false,
  staticHintText: "Search... ",
  staticHintTextStyle: const TextStyle(fontSize: 14, color: Colors.grey),
  hints: const [
    'Quick Search 💡',
    'Explore More 🌍',
    'Find Your Favorite 🔍',
  ],
  fieldBackgroundColor: Colors.grey[200],
  animatedHintTextStyle: const TextStyle(fontSize: 16, color: Colors.black),
  hintSwitchDuration: const Duration(seconds: 2),
  hintAnimationType: HintAnimationType.fade,
)

完整的示例Demo

以下是一个完整的示例代码，展示了如何使用 CircularAnimatedHintTextField 和 AnimatedHintTextField：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Custom Animated Hint TextField',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: const Text(
          'Custom Animated Hint TextField✨',
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
      body: GestureDetector(
        onTap: () {
          FocusManager.instance.primaryFocus?.unfocus();
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 24),

                // Cyclic Scrolling Example
                const Text(
                  " ◆ Cyclic Scrolling Animation",
                  style: TextStyle(
                      fontSize: 15,
                      color: Colors.purple,
                      fontWeight: FontWeight.bold),
                ),
                const CircularAnimatedHintTextField(
                  staticHintText: "Search food...",
                  staticHintTextStyle:
                      TextStyle(color: Colors.grey, fontSize: 14),
                  hints: [
                    "Sizzling Steaks 🥩",
                    "Pasta Paradise 🍝",
                    "Dessert Dreams 🍨",
                    "Sushi Spot 🍣",
                    "Wrap Wonders 🌯",
                    "Beverage Bliss 🥤",
                  ],
                  animatedHintTextStyle: TextStyle(
                      fontSize: 14,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 14),

                // Slide Animation Example
                const Text(
                  " ◆ Slide Animation",
                  style: TextStyle(
                      fontSize: 15,
                      color: Colors.deepOrange,
                      fontWeight: FontWeight.bold),
                ),
                AnimatedHintTextField(
                  prefixIcon: const Text("🫠"),
                  fieldBorder: Border.all(color: Colors.transparent),
                  borderRadius: BorderRadius.circular(100),
                  staticHintText: "Search items...",
                  staticHintTextStyle:
                      TextStyle(color: Colors.grey.shade400, fontSize: 14),
                  hints: const [
                    "🔍 Quick search",
                    "🚀 Easy navigation",
                    "🌍 Explore destinations",
                  ],
                  animateHintText: false,
                  fieldBackgroundColor: Colors.grey[100],
                  animatedHintTextStyle: const TextStyle(
                      fontSize: 14,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                  hintSwitchDuration: const Duration(seconds: 3),
                  hintAnimationType: HintAnimationType.slide,
                ),
                const SizedBox(height: 24),

                // Scale Animation Example
                const Text(
                  " ◆ Scale In/Out Animation",
                  style: TextStyle(
                      fontSize: 15,
                      color: Colors.green,
                      fontWeight: FontWeight.bold),
                ),
                AnimatedHintTextField(
                  suffixIcon: const Icon(Icons.ac_unit, color: Colors.green),
                  fieldBorderWidth: 1,
                  focusedBorderColor: Colors.yellow,
                  unfocusedBorderColor: Colors.grey,
                  borderRadius: BorderRadius.circular(20),
                  staticHintText: "Find items...",
                  staticHintTextStyle:
                      const TextStyle(color: Colors.grey, fontSize: 14),
                  hints: const [
                    "Pizza 🍕",
                    "Burger 🍔",
                    "Cake 🍰",
                    "Noodles 🍜",
                    "Sandwich 🥪",
                  ],
                  animateHintText: false,
                  fieldBackgroundColor: Colors.grey[100],
                  animatedHintTextStyle: const TextStyle(
                      fontSize: 14,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                  hintSwitchDuration: const Duration(seconds: 3),
                  hintAnimationType: HintAnimationType.scale,
                ),
                const SizedBox(height: 24),

                // Fade Animation Example
                const Text(
                  " ◆ Fade Animation",
                  style: TextStyle(
                      fontSize: 16,
                      color: Colors.pink,
                      fontWeight: FontWeight.bold),
                ),
                AnimatedHintTextField(
                  animateHintText: false,
                  hints: const [
                    '💡 Quick Search',
                    '🌍 Explore More',
                    '🔍 Find Your Favorite',
                  ],
                  staticHintText: "Search items...",
                  staticHintTextStyle:
                      const TextStyle(color: Colors.grey, fontSize: 14),
                  fieldBackgroundColor: Colors.grey[200],
                  animatedHintTextStyle: const TextStyle(
                      fontSize: 15,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                  hintSwitchDuration: const Duration(seconds: 2),
                  hintAnimationType: HintAnimationType.fade,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用animated_custom_hint_textfield插件的示例代码。这个插件允许你在输入框中显示带有动画的提示文本。

首先，你需要在你的pubspec.yaml文件中添加这个插件的依赖：

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

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

接下来是一个完整的示例代码，展示如何使用animated_custom_hint_textfield：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Custom Hint Textfield Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Custom Hint Textfield Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              AnimatedCustomHintTextField(
                hintText: '请输入邮箱',
                labelText: '邮箱',
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value.isEmpty || !value.contains('@')) {
                    return '请输入有效的邮箱地址';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value;
                },
              ),
              SizedBox(height: 16),
              AnimatedCustomHintTextField(
                hintText: '请输入密码',
                labelText: '密码',
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty || value.length < 6) {
                    return '密码至少6个字符';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value;
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    // 可以在这里处理表单数据，例如登录请求
                    print('Email: $_email, Password: $_password');
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了AnimatedCustomHintTextField来代替标准的TextField。AnimatedCustomHintTextField具有以下主要属性：

  • hintText: 当输入框为空时显示的提示文本。
  • labelText: 输入框的标签文本。
  • keyboardType: 键盘类型，用于指定输入内容的类型。
  • validator: 验证函数，用于验证输入内容的合法性。
  • onSaved: 保存函数，用于保存输入内容。
  • obscureText: 是否隐藏输入内容（适用于密码输入框）。

你可以根据需求调整这些属性，以满足你的应用需求。希望这个示例能帮助你更好地使用animated_custom_hint_textfield插件。

回到顶部