The Flutter automatically prompts the text box

The cat said

When you start using multiple screens, you’re going to need bigger and bigger screens, and you’re going to find all kinds of reasons to convince yourself.

Indeed, an assistive screen can greatly improve efficiency. Try to create a comfortable environment for yourself. After all, you need to use it every day.

Today’s recommended article is a prompt input box, although simple, but very practical.

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

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

Ducafecat WeChat group

The original

Theiskaa.medium.com/autocomplet…

code

Github.com/theiskaa/an…

reference

Flutter. Dev/docs/develo…
Pub. Dev/packages/fi…

The body of the

Note: If you are new to creating very basic advanced autocomplete fields, then this article is for you, go ahead!

Everybody knows the autocomplete field, we’re around. We see them in mobile applications, websites, desktop applications, and so on. Have you tried to create autocomplete fields in Flutter? Ah, that’s a bit difficult for beginners. When you are a new learner, it seems impossible.

Well, that package could help us. (I think most of us know about packages/plugins, if you don’t, don’t worry, just follow this official documentation for the package and read it in full and come back!) .

Flutter. Dev/docs/develo…

One of the ones I wrote was the Field_suggestion package, which helps us create Basic or advanced autocomplete fields.

Pub. Dev/packages/fi…

Before I start explaining how to use this package, I want to give you an overview of the applications I use this package for.

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

For details: github.com/theiskaa/an…

Ok, that’s enough, let’s start using field suggestions.

Requirements

A TextedingController and a list of suggestions.

final textEditingController = TextEditingController();

// And
List<String> suggestionList = [
 '[email protected]'.'[email protected]'.'[email protected]',];// Or

List<int> numSuggestions = [
  13187829696.13102743803.15412917703,];// Or
// Note: Take look at [Class suggestions] part.
List<UserModel> userSuggestions = [
  UserModel(email: '[email protected]', password: 'test123'),
  UserModel(email: '[email protected]', password: 'test123'),
  UserModel(email: '[email protected]', password: 'test123')];Copy the code

Very basic usage

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

FieldSuggestion(
  textController: textEditingController,
  suggestionList: suggestionList,
  hint: 'Email',),Copy the code

External control

Here, we’ve just wrapped scaffolding with GestureDetector to handle gestures on screen. Now we can close the box when we click on the screen. (You can do this anywhere using BoxController, which uses 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, ), ), ), ); }}Copy the code

Class suggestions

Note: you must use the toJson method in your model classes. If you want to use it in the suggested 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,
      };
}
Copy the code

If we give a userSuggestions, it is List< userModel >. Then we must add the searchBy property. Our model is just E-mail and passwords, right? So we can implement searchBy: email or searchBy: password.

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

The elder brother of the © cat

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…