flutter_textfield_search

Build and Test

FTFS 是一个 Flutter 包，它使用 TextField Widget 从列表中搜索和选择一个值。它是一个简单、轻量级且经过充分测试的包，不像其他“自动完成”或文本字段搜索包。在此处查看完整的代码覆盖率结果（JSON 格式）此处。

用法

要使用此包，请在 pubsec.yaml 文件中将 flutter_textfield_search 添加为依赖项。

示例

导入包。

`import 'package:flutter_textfield_search/search.dart'`;

然后，在通常使用 TextField Widget 的任何地方包含该 Widget，并提供一个 String 作为 label，一个 List 作为 initialList，以及一个 TextEditingController 作为 controller。

使用 TextFieldSearch Widget 的示例 MaterialApp

    const label = "Some Label";
    const dummyList = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
    TextEditingController myController = TextEditingController();
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(initialList: dummyList, label: label, controller: myController)
      ),
    )

要获取选定选项的值，请使用 controller 上的 addListener 来监听更改。

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    @override
    void initState() {
      super.initState();
      // Start listening to changes.
      myController.addListener(_printLatestValue);
    }
    
    _printLatestValue() {
      print("Textfield value: ${myController.text}");
    }

从 Future List 中选择一个 List 项

    TextEditingController myController = TextEditingController();

    // create a Future that returns List
    Future<List> fetchData() async {
      await Future.delayed(Duration(milliseconds: 5000));
      List _list = new List();
      String _inputText = myController.text;
      // create a list from the text input of three items
      // to mock a list of items from an http call
      _list.add(_inputText + ' Item 1');
      _list.add(_inputText + ' Item 2');
      _list.add(_inputText + ' Item 3');
      return _list;
    }

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    // used within a MaterialApp (code shortened)
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(
          label: 'My Label', 
          controller: myController
          future: () {
            return fetchData();
          }
        )
      ),
    )

从 Future List 中选择一个对象

    TextEditingController myController = TextEditingController();

    // create a Future that returns List
    // IMPORTANT: The list that gets returned from fetchData must have objects that have a label property.
    // The label property is what is used to populate the TextField while getSelectedValue returns the actual object selected
    Future<List> fetchData() async {
      await Future.delayed(Duration(milliseconds: 3000));
      List _list = new List();
      String _inputText = myController.text;
      List _jsonList = [
        {
          'label': _inputText + ' Item 1',
          'value': 30
        },
        {
          'label': _inputText + ' Item 2',
          'value': 31
        },
        {
          'label': _inputText + ' Item 3',
          'value': 32
        },
      ];
      // create a list of 3 objects from a fake json response
      _list.add(new TestItem.fromJson(_jsonList[0]));
      _list.add(new TestItem.fromJson(_jsonList[1]));
      _list.add(new TestItem.fromJson(_jsonList[2]));
      return _list;
    }

    @override
    void dispose() {
      // Clean up the controller when the widget is removed from the
      // widget tree.
      myController.dispose();
      super.dispose();
    }

    // used within a MaterialApp (code shortened)
    MaterialApp(
      home: Scaffold(
      body: TextFieldSearch(
          label: 'My Label', 
          controller: myController
          future: () {
            return fetchData();
          },
          getSelectedValue: (value) {
            print(value); // this prints the selected option which could be an object
          }
        )
      ),
    )

    // Mock Test Item Class
    class TestItem {
      String label;
      dynamic value;
      TestItem({
        this.label,
        this.value
      });

      factory TestItem.fromJson(Map<String, dynamic> json) {
        return TestItem(
          label: json['label'],
          value: json['value']
        );
      }
    }

问题

请通过电子邮件将任何问题、错误或您希望看到的附加功能发送至 [email protected]。

贡献

如果您希望为此包做出贡献，可以 fork 该仓库并向该仓库发起 pull request。

注意：通过运行 flutter test --coverage 进行测试将生成 coverage/lcov.info。运行 bash test-coverage.sh 将把 lcov.info 文件解析为 JSON 格式。这在 master 分支的 pull request 中会自动发生，但在本地进行测试总是有益的。

GitHub

查看 Github