elastic_autocomplete 0.0.1

ElasticAutocomplete is a widget combines Autocomplete and Localstorage.

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Scrollbar(
          child: SingleChildScrollView(
              padding: const EdgeInsets.all(10),
              child: Center(
                  child: Container(
                constraints: const BoxConstraints(maxWidth: 400),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const <Widget>[
                    Example1(),
                    Example2(),
                  ],
                ),
              ))),
        ));
  }
}

class Example1 extends StatefulWidget {
  const Example1({Key? key}) : super(key: key);

  @override
  State<Example1> createState() => Example1State();
}

class Example1State extends State<Example1> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Padding(
            padding: EdgeInsets.symmetric(vertical: 15),
            child: Text(
              'Example1: set options in advance.',
              style: TextStyle(fontSize: 18),
            )),
        ElasticAutocomplete<String>(
            optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
          }
          const List<String> candidates = [
            "app",
            "bar",
            "car",
            "dot",
            "ear",
            "foo",
            "god",
            "hop",
            "ice",
            "jam"
          ];
          return candidates.where((String option) {
            return option.contains(textEditingValue.text);
          });
        }, fieldViewBuilder: (BuildContext context,
                TextEditingController textEditingController,
                FocusNode focusNode,
                void Function() onFieldSubmitted) {
          // Design field view by yourself
          return TextFormField(
              autofocus: true,
              // You must set controller, focusNode, and onFieldSubmitted in the textFormField
              controller: textEditingController,
              focusNode: focusNode,
              onFieldSubmitted: (String value) {
                onFieldSubmitted();
              },
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
              ));
        }),
      ],
    );
  }
}

class Example2 extends StatefulWidget {
  const Example2({Key? key}) : super(key: key);

  @override
  State<Example2> createState() => Example2State();
}

class Example2State extends State<Example2> {
  final _formKey = GlobalKey<FormState>();
  late FocusNode _node;
  late ElasticAutocompleteController<String> _elasticAutocompleteCtrl;
  late TextEditingController _textEditingCtrl;

  @override
  void initState() {
    _node = FocusNode();
    _textEditingCtrl = TextEditingController();
    _elasticAutocompleteCtrl =
        ElasticAutocompleteController(id: 'name', caseSensitive: false);
    super.initState();
  }

  @override
  void dispose() {
    _textEditingCtrl.dispose();
    _node.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Padding(
                padding: EdgeInsets.symmetric(vertical: 15),
                child: Text(
                  'Example2: store options after sending.',
                  style: TextStyle(fontSize: 18),
                )),
            ElasticAutocomplete<String>(
                controller: _elasticAutocompleteCtrl,
                // use optionsBuilder which is generated by controller
                optionsBuilder: _elasticAutocompleteCtrl.optionsBuilder,
                // use textEditingCtrl to get values in the TextFormField.
                textEditingController: _textEditingCtrl,
                // when setting the textEditingController, set the focusNode simultaneously.
                focusNode: _node,
                fieldViewBuilder: (BuildContext context,
                    TextEditingController textEditingController,
                    FocusNode focusNode,
                    void Function() onFieldSubmitted) {
                  return TextFormField(
                      controller: textEditingController,
                      focusNode: focusNode,
                      onFieldSubmitted: (String value) {
                        onFieldSubmitted();
                      },
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                      ));
                }),
            const SizedBox(height: 20),
            Row(
              children: [
                ElevatedButton(
                  onPressed: () async {
                    if (_formKey.currentState?.validate() ?? false) {
                      String val = _textEditingCtrl.text;
                      _textEditingCtrl.clear();
                      await _elasticAutocompleteCtrl.store(val);

                      if (!mounted) return;
                      ScaffoldMessenger.of(context)
                          .showSnackBar(SnackBar(content: Text(val)));
                    }
                  },
                  child:
                      const Text("send", style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(
                  width: 10,
                ),
                ElevatedButton(
                  onPressed: () {
                    _elasticAutocompleteCtrl.clear();
                  },
                  child: const Text("clear",
                      style: TextStyle(color: Colors.white)),
                ),
              ],
            )
          ],
        ));
  }
}