“This is the 28th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

We have realized the chat list interface of wechat. There is also a search function at the top of the chat interface in wechat, which can search the chat information of wechat. Today, we will imitate and realize this function.

Add search entry

On the wechat home page, we can find that the search box is sliding along with the list, so it shows that the search component and ListView are likely to be one, we now implement this component;

class ChatSearchCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red, height: 40,); }}Copy the code

Let’s start by giving the widget a simple red background and height;

Now we need to modify the chat interface code. Since the search box is part of the ListView, we will treat it as the first Cell, so the ListView itemCount should be +1:

return ListView.builder(
  itemCount: _list.length + 1,
  itemBuilder: _itemBuilderForRow);
Copy the code

Select * from _itemBuilderForRow; select * from _itemBuilderForRow; select * from _itemBuilderForRow;

Layout search entry UI

In order to better compare the layout with wechat, we set the color of the navigation bar as a gray background, because the search entry here needs to respond to click events, so gestures are used to include:

Hide the shadow below the navigation bar

We can see a shaded line below the navigation bar. We will hide it. We need to set the corresponding page AppBar elevation property to 0:

Add a white background

Obviously, we should display a Stack here with the search text and icon on a rounded white background:

Use Stack for layout, add a rounded white background first;

Add search icon and text

By adding a Container with rounded corners and a white background on the Stack, we need to add a Row to the layout since the search icon and text are horizontal:

  • StackthealignmentProperty can be set to white backgroundContainerandRowAre centered and aligned;
  • RowthemainAxisAlignmentProperties can be setRowIn theIconandTextCenter aligned in the main axis;

Search page

Head search box

In terms of the layout of the search page, the page is roughly divided into two parts, the upper part is the search input box, and the lower part is the ListView that displays the results, so we can use Column to layout the search page:

The SearchBar is displayed in the top half, and the ListView is displayed in the bottom half.

This is because when we add a ListView, we need to specify the height of the ListView. There are two solutions:

  • First, useExpendedtheListViewWrap, code and effect as follows:

  • Second, useListViewtheshrinkWrapProperty, set totrue, the code and effect are as follows:

The result: Using Expanded, the ListView ADAPTS the remaining areas to the layout; The shrinkWrap property determines whether the list’s length wraps only the length of its contents. ShrinkWrap must be true when the ListView is embedded in an infinite container component, otherwise Flutter will warn you

We’re using Expanded here. Note that Expanded requires setting Flex, which defaults to 1 since we’re using flex directly here;

ListView offset problem

Although we successfully added the ListView, but the ListView content is offset downward, this time we need to remove this part of the offset; To remove the header offset, use the mediaQuery. removePadding method as follows:

Search box layout

Let’s look at the current red header code:

StatusBarHeight gets the statusBarHeight.

Because our search box is displayed in the bottom half, below the status bar, we use Column for layout, and the code is as follows:

Next, the red area is laid out left and right using Row, with the Container on the left and the cancel button on the right:

Divide the area into two parts. The top half uses SizeBox to fill the status bar (safe zone) and the bottom half shows the search area and cancel.

Input box layout

The input box is divided into three parts, the magnifying glass on the left, the input box in the middle, and the clear button on the right. So we use Row to layout, the code and effect are as follows:

  • The magnifying glassIconuseSizeBoxPackage, you can set the width, adjust the size;
  • The input box in the middleTextFielduseExpandedWrap it up so that the input box ADAPTS to its sizeremoveButtons are automatically placed to the right;

Input box cursor color

TextField’s CursorColor property modifies the color of the cursor in the input box

cursorColor: Colors.green, // Enter the box cursor color
Copy the code

The code and effect are as follows:

Size, color, and width of text

TextField text information is still a style property, and style is of type TextStyle:

style: TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.w300),
Copy the code

The effect is as follows:

The border of the input box

When we type too much text into an input field, the following happens:

We need to set the decoration of TextField.

Black line below input box

If we look at the input box carefully, there is a black line below the input box, so how to hide it? You need to set the border property of the InputDecoration:

A placeholder

Set the TextField placeholder text using the attribute hintText:

The first response

If we need the input field to automatically focus for the first response, we can use TextField’s Autofocus property to turn up the keyboard:

:

Remove button

Clear button style:

Clear button function

When we click the clear button, we need to clear the contents of the input field. To achieve this function, we need to use the TextEditingController. Let’s define a:

final TextEditingController _textEditingController = TextEditingController();
Copy the code

Then assign _textEditingController to the Controller property of TextField:

In this way, we can use _textEditingController to control the functions of the input field;

When text is entered into an input field, TextField’s onChange method will generate a callback that returns the current input field:

We extract this method as:

  void _textFieldOnChange(text) {

  }
Copy the code

We need to control the display and hide of the clear button. By default, the clear button is hidden. When the input field shows the clear button, we need a bool to indicate the display and hide:

bool _showClear = false; // Whether to hide the request button
Copy the code

If true, add clear button:

Then in the _textFieldOnChange method, determine whether to show hide as follows:

The clear button can also be clicked to clear the content of the input box. We need to add a gesture to the Icon:

_textEditingController. We use the clear () method to clear the input box text content, but it is important to note that this method will not trigger a TextField onChange method, then click remove, remove button itself will not be hidden, So we need to call the onChange method manually:

At present, search box related functions have been fully realized;