Suggest previous entered emails while opening text form field in Flutter

Question

I am working with Flutter. Right now, I am creating a text form field for email. After focusing the text form field, I need to show the previous entered emails as suggestions. How can I do that. I saw in multiple applications that it was showing the mobile numbers that are entered earlier.

Answer 1

Try this code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var HintEmail = List<String>.empty(growable: true);
  var _textFieldController;

  @override
  void dispose() {
    super.dispose();
    _textFieldController.dispose();
  }

  _addAutoFillText() {
    if (_textFieldController.text.isEmpty) {
      // Don't add input text if TextFormField is empty
      debugPrint('_textFieldController.text is empty');
    } else {
      debugPrint('${_textFieldController.text} added');
      setState(() {
        // Add TextFormField String to List
        HintEmail.add(_textFieldController.text);
        // Clear TextFormField after adding
        _textFieldController.clear();
      });
      debugPrint('_textFieldHints contains:');
      HintEmail.sort();
      HintEmail.forEach((text) {
        debugPrint('$text');
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: RawAutocomplete<String>(
            optionsBuilder: (TextEditingValue textEditingValue) {
              if (textEditingValue.text == null ||
                  textEditingValue.text == '') {
                return const Iterable<String>.empty();
              }
              return HintEmail.where((String option) {
                return option
                    .toLowerCase()
                    .contains(textEditingValue.text.toLowerCase());
              });
            },
            onSelected: (String selection) {
              debugPrint('$selection selected');
            },
            fieldViewBuilder: (BuildContext context,
                TextEditingController textEditingController,
                FocusNode focusNode,
                VoidCallback onFieldSubmitted) {
              _textFieldController = textEditingController;
              return TextFormField(
                controller: _textFieldController,
                focusNode: focusNode,
                onFieldSubmitted: (String value) {
                  onFieldSubmitted();
                },
              );
            },
            optionsViewBuilder: (BuildContext context,
                AutocompleteOnSelected<String> onSelected,
                Iterable<String> options) {
              return Align(
                alignment: Alignment.topLeft,
                child: Material(
                  elevation: 4.0,
                  child: Container(
                    height: 200.0,
                    child: ListView.builder(
                      padding: EdgeInsets.all(8.0),
                      itemCount: options.length + 1,
                      itemBuilder: (BuildContext context, int index) {
                        if (index >= options.length) {
                          return TextButton(
                            child: const Text('clear'),
                            onPressed: () {
                              _textFieldController.clear();
                            },
                          );
                        }
                        final String option = options.elementAt(index);
                        return GestureDetector(
                          onTap: () {
                            onSelected(option);
                          },
                          child: ListTile(
                            title: Text(option),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _addAutoFillText(),
        child: Icon(Icons.add),
      ),
    );
  }
}