Flutter automatically prompts the text box

Brother Cat said

When you start to use multiple screens, you will need bigger and more screens. If you don't believe it, try it, and you will find all kinds of reasons to convince yourself.

It is true that an auxiliary screen can greatly improve efficiency. Try to create a comfortable environment for yourself, after all, you need to use it every day.

The article recommended today is a prompt input box. Although simple, it is very practical.

This kind of search prompt box can be placed in the login account input box, search input box prompt, and basic data input box. . .

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

original

https://theiskaa.medium.com/autocomplete-fields-in-flutter-ec4eb6ec5ad7

Code

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

reference

• https://flutter.dev/docs/development/packages-and-plugins/using-packages
• https://pub.dev/packages/field_suggestion

text

Note: If you are a novice and want to create very basic advanced auto-completion fields, then this article is for you, continue!

Everyone knows that the field of auto-completion is up to us. We can see them in mobile apps, websites, desktop apps, etc. Have you ever tried to create auto-completion fields in Flutter? Ah, this is a bit difficult for novices. When you are a new learner, this seems impossible.

Well, that package can help us. (I think most of us know packages/plugins, if you don’t know, don’t worry, just follow the package and complete reading of this official document and come back!).

https://flutter.dev/docs/development/packages-and-plugins/using-packages

One of the packages I wrote is the field_suggestion package, which can help us create basic or advanced auto-complete fields.

https://pub.dev/packages/field_suggestion

Before starting to explain how to use this package, I want to show you an overview of the applications I use this package.

This is a screenshot of an open source application called Anon. There we use field suggestions as our search bar.

View details: https://github.com/theiskaa/anon

Okay, that's enough, let's start using on-site suggestions.

Requirements

A textingcontroller and a list of suggestions.

final textEditingController = TextEditingController();

// And
List<String> suggestionList = [
 '[e-mail]',
 '[e-mail]',
 '[e-mail]',
];

// Or

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

// Or
// Note: Take look at [Class suggestions] part.
List<UserModel> userSuggestions = [
  UserModel(email: '[e-mail]', password: 'test123'),
  UserModel(email: '[e-mail]', password: 'test123'),
  UserModel(email: '[e-mail]', password: 'test123')
];

Very basic usage

Here we have, just text edit controller and suggestion list (as string)

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

External control

Here, we just GestureDetector to handle gestures on the screen. Now we can close the box when we tap the screen. (You can use BoxController for this operation 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

Note: You must use the toJson method in your model class. If you want to use it in the suggestion list.

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,
      };
}

If we give a userSuggestions , it is List<usermodel> . Then we must add the searchBy attribute. Our model only has email and password, right? So we can implement it like this: searchBy: email or searchBy: password .

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

---

© Cat brother

https://ducafecat.tech/

https://github.com/ducafecat

Past

Open source

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

News client

https://github.com/ducafecat/flutter_learn_news

strapi manual translation

https://getstrapi.cn

WeChat discussion group ducafecat

Series collection

Translation

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Open source project

https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/

Dart programming language basics

https://space.bilibili.com/404904528/channel/detail?cid=111585

Getting started with Flutter zero foundation

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter actual combat from scratch news client

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter component development

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578