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

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

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

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

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

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

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

一个 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,
           ),
         ),
       ),
     );
   }
 }

留神: 你必须在你的模型类中应用 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

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

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

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

猫哥说

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

微信群 ducafecat

原文

代码

参考

注释

Requirements

十分根本的用法

内部管制

Class suggestions

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

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

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

猫哥说

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