autocomplete2.dart

autocomplete2.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: (_, constraints) => RawAutocomplete<String>(
        textEditingController: myController,
        focusNode: myFocusNode,
        optionsViewBuilder: (
          BuildContext context,
          AutocompleteOnSelected<String> onSelected,
          Iterable<String> options,
        ) {
          return Align(
            alignment: Alignment.topLeft,
            child: Scaffold(
              body: Container(
                // constraints: BoxConstraints(
                //   maxHeight: MediaQuery.of(context).viewInsets.bottom,
                // ),
                color: Colors.green,
                child: Material(
                  color: Colors.red,
                  child: SizedBox(
                    width: constraints.maxWidth,
                    child: ListView.builder(
                      padding: EdgeInsets.zero,
                      itemCount: options.length,
                      itemBuilder: (context, index) {
                        final String option = options.elementAt(index);
                        return InkWell(
                          onTap: () {
                            onSelected(option);
                          },
                          child: ListTile(
                            title: Text(option),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
            ),
          );
        },
        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',
];