关于flutter:Flutter-自动提示文本框

猫哥说

当你开始用多屏，你就会须要屏幕越来越大、越来越多，不信你试试，会找各种理由来压服本人。

的确一块辅助屏对效率有很大的晋升，尝试打造一个本人难受的环境，毕竟每天都要用到。

明天举荐的文章是提醒输入框，尽管简略，然而很实用。

这种搜寻提示框，能够放在登录账号输入框，搜寻输入框提醒，根底数据输入框。。。

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

原文

https://theiskaa.medium.com/a…

代码

• https://github.com/theiskaa/anon

参考

• https://flutter.dev/docs/deve…
• https://pub.dev/packages/fiel…

注释

留神: 如果你是老手，想要创立十分根本的高级主动实现字段，那么这篇文章是为你筹备的，持续！

每个人都晓得主动补全畛域，有咱们左右。咱们能够在挪动应用程序、网站、桌面应用程序等中看到它们。你有没有试过在 Flutter 中创立主动补全字段？啊，这对老手来说有点难。当你是一个新的学习者，这仿佛是不可能的。

好吧那包裹能够帮咱们。(我想咱们大多数人都晓得软件包 / 插件，如果你不晓得，不要放心，只有依照这个官网文档的软件包和残缺的浏览而后回来!).

https://flutter.dev/docs/deve…

我写的其中一个是 field_suggestion 包，它能够帮忙咱们创立 Basic 或高级的主动实现字段。

https://pub.dev/packages/fiel…

在开始解释如何应用这个软件包之前，我想向您展现一个我应用这个软件包的应用程序的概览。

这是一个名为 Anon 的开源应用程序的截图。在那里咱们应用字段倡议作为咱们的搜寻栏。

查看详细信息: https://github.com/theiskaa/anon

好了，够了，让咱们开始应用现场倡议。

Requirements

一个 textedingcontroller 和倡议列表。

final textEditingController = TextEditingController();

// And
List<String> suggestionList = [
 'test@gmail.com',
 'test1@gmail.com',
 'test2@gmail.com',
];

// Or

List<int> numSuggestions = [
  13187829696,
  13102743803,
  15412917703,
];

// Or
// Note: Take look at [Class suggestions] part.
List<UserModel> userSuggestions = [UserModel(email: 'test@gmail.com', password: 'test123'),
  UserModel(email: 'test1@gmail.com', password: 'test123'),
  UserModel(email: 'test2@gmail.com', password: 'test123')
];

十分根本的用法

这里咱们有，只是文本编辑控制器和倡议列表 (作为字符串)

FieldSuggestion(
  textController: textEditingController,
  suggestionList: suggestionList,
  hint: 'Email',
),

内部管制

在这里，咱们刚刚用 GestureDetector 包装了脚手架来解决屏幕上的手势。当初咱们能够在点击屏幕的时候敞开盒子。(您能够在任何中央应用 BoxController 进行此操作，其中应用了 FieldSuggestion)。

class Example extends StatelessWidget {final _textController = TextEditingController();
   final _boxController = BoxController();

   @override
   Widget build(BuildContext context) {
     return GestureDetector(onTap: () => _boxController.close(),
       child: Scaffold(
         body: Center(
           child: FieldSuggestion(
             hint: 'test',
             suggestionList: [], // Your suggestions list here...
             boxController: _boxController,
             textController: _textController,
           ),
         ),
       ),
     );
   }
 }

Class suggestions

留神: 你必须在你的模型类中应用 toJson 办法。如果你想在倡议列表中应用它。

class UserModel {
  final String? email;
  final String? password;

  const UserModel({this.email, this.password});

  // If we wanna use this model class into FieldSuggestion.
  // Then we must have toJson method, like this:
  Map<String, dynamic> toJson() => {
        'email': this.email,
        'password': this.password,
      };
}

如果咱们给出一个 userSuggestions，它是 List<usermodel>。而后咱们必须增加 searchBy 属性。咱们的模型只有电子邮件和明码，对吗？所以咱们能够这样实现: searchBy: email 或者 searchBy: password。

FieldSuggestion(
  hint: 'Email',
  textController: textEditingController,
  suggestionList: userSuggestions,
  searchBy: 'email' // Or 'password'
),

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…