autocomplete.dart

autocomplete.dart

import 'package:flutter/material.dart';

void main() => runApp(const AutocompleteExampleApp());

class AutocompleteExampleApp extends StatelessWidget {
  const AutocompleteExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Autocomplete funciona aí!'),
        ),
        // bottomNavigationBar: // create list of appbars
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.business), label: 'Buss'),
            BottomNavigationBarItem(icon: Icon(Icons.school), label: 'School'),
          ],
          selectedItemColor: Colors.amber[800],
        ),

        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(
                height: 100,
                child: Center(
                  child: Text(
                    'This example shows how to create a basic autocomplete '
                    'widget using the Autocomplete widget.',
                  ),
                ),
              ),
              const AutocompleteBasicExample(),
              Container(
                height: 10000,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class AutocompleteBasicExample extends StatefulWidget {
  const AutocompleteBasicExample({super.key});

  @override
  State<AutocompleteBasicExample> createState() =>
      _AutocompleteBasicExampleState();
}

class _AutocompleteBasicExampleState extends State<AutocompleteBasicExample> {
  final myController = TextEditingController();
  final myFocusNode = FocusNode();

  @override
  void dispose() {
    myController.dispose();
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (_, BoxConstraints constraints) => RawAutocomplete<String>(
        textEditingController: myController,
        focusNode: myFocusNode,
        optionsViewBuilder: (
          BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          Iterable<String> options,
        ) {
          final keyboardOpenedPadding =
              MediaQuery.of(context).viewInsets.bottom;
          // return Container(
          //   alignment: Alignment.topCenter,
          //   margin: EdgeInsets.only(
          //     bottom: keyboardOpenedPadding,
          //   ),
          //   child: Material(
          //     elevation: 4.0,
          //     child: ListView(
          //       shrinkWrap: true,
          //       itemExtent: 40,
          //       padding: EdgeInsets.zero,
          //       children: options
          //           .map((String option) => ListTile(
          //                 onTap: () {
          //                   onSelected(option);
          //                 },
          //                 title: Text(option),
          //               ))
          //           .toList(),
          //     ),
          //   ),
          // );
          return Container(
            alignment: Alignment.topCenter,
            margin: EdgeInsets.only(
              bottom: keyboardOpenedPadding,
            ),
            child: Material(
              elevation: 4.0,
              child: ListView(
                shrinkWrap: true,
                itemExtent: 40,
                padding: EdgeInsets.zero,
                children: options
                    .map((String option) => ListTile(
                          onTap: () {
                            onSelected(option);
                          },
                          title: Text(option),
                        ))
                    .toList(),
              ),
            ),
          );
        },
        optionsBuilder: (TextEditingValue textEditingValue) {
          if (textEditingValue.text == '') {
            return const Iterable<String>.empty();
          }
          return kOptions.where((String option) {
            return option.contains(textEditingValue.text.toLowerCase());
          });
        },
        onSelected: (String selection) {
          debugPrint('You just selected $selection');
        },
        fieldViewBuilder: (
          context,
          myController,
          myFocusNode,
          onFieldSubmitted,
        ) =>
            TextField(
          controller: myController,
          focusNode: myFocusNode,

          // onSubmitted: onFieldSubmitted,
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: 'What animal would you like to see?',
            suffixIcon: IconButton(
              icon: const Icon(Icons.clear, color: Colors.black),
              onPressed: () {
                myController.clear();
              },
            ),
          ),
        ),
      ),
    );
  }
}

const List<String> kOptions = <String>[
  'ardvark',
  'bobcat',
  'chameleon',
  'dog',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'dog',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'giraffe',
  'hippo',
  'iguana',
  'jaguar',
  'kangaroo',
  'lemur',
  'moose',
  'newt',
  'octopus',
  'panda',
  'quail',
  'rabbit',
  'snake',
  'tiger',
  'unicorn',
  'ardvark',
  'bobcat',
  'chameleon',
  'elephant',
  'fox',
  'giraffe',
  'hippo',
  'iguana',
  'jaguar',
  'kangaroo',
  'lemur',
  'moose',
  'newt',
  'octopus',
  'panda',
  'quail',
  'rabbit',
  'snake',
  'tiger',
  'unicorn',
  'ardvark',
  'bobcat',
  'chameleon',
  'dog',
  'elephant',
  'fox',
  'giraffe',
  'hippo',
  'iguana',
  'jaguar',
  'kangaroo',
  'lemur',
  'moose',
  'newt',
  'octopus',
  'panda',
  'quail',
  'rabbit',
  'snake',
  'tiger',
  'unicorn',
  'ardvark',
  'bobcat',
  'chameleon',
  'dog',
  'elephant',
  'fox',
  'giraffe',
  'hippo',
  'iguana',
  'jaguar',
  'kangaroo',
  'lemur',
  'moose',
  'newt',
  'octopus',
  'panda',
  'quail',
  'rabbit',
  'snake',
  'tiger',
  'unicorn',
  'ardvark',
  'bobcat',
  'chameleon',
  'dog',
  'elephant',
  'fox',
  'giraffe',
  'hippo',
  'iguana',
  'jaguar',
  'kangaroo',
  'lemur',
  'moose',
  'newt',
  'octopus',
  'panda',
  'quail',
  'rabbit',
  'snake',
  'tiger',
  'unicorn',
  'zebraa',
  'zebrab',
  'zebrac',
  'zebrad',
  'zebrae',
  'zebraf',
  'zebraf',
  'zebraf',
  'zebrag',
  'zebrah',
  'zeeeezzzz',
];