Repository: flutter
Issue: Autocomplete should automatically place options above or below based on where fits
Labels: framework,f: material design,has reproducible steps,P2,found in release: 2.10,found in release: 2.13,team-design,triaged-design,:hourglass_flowing_sand:

**Update:** For updated state of this issue, see https://github.com/flutter/flutter/issues/101620#issuecomment-1626095240 .


---

i am using autocomplete bar in windows and web. if autocomplete bar in the bottom of screen then suggestion are invisible. if i scroll then suggestion disappeared. i want if autocomplete is in bottom the suggestion will show on above side.

<details>
<summary> code </summary>

```
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const autocomplete_widget(),
    );
  }
}

class autocomplete_widget extends StatefulWidget {
  const autocomplete_widget({Key? key}) : super(key: key);

  @override
  State<autocomplete_widget> createState() => _autocomplete_widgetState();
}

class _autocomplete_widgetState extends State<autocomplete_widget> {
  // This will be displayed below the autocomplete field
  String? _selectedAnimal;

  // This list holds all the suggestions
  final List<String> _suggestions = [
    'Alligator',
    'Buffalo',
    'Chicken',
    'Dog',
    'Eagle',
    'Frog'
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body:

          SingleChildScrollView(child:

      Column(
        children: [
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),    Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),    Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
          Autocomplete<String>(
            optionsBuilder: (TextEditingValue value) {
              // When the field is empty
              if (value.text.isEmpty) {
                return [];
              }

              // The logic to find out which ones should appear
              return _suggestions.where((suggestion) =>
                  suggestion.toLowerCase().contains(value.text.toLowerCase()));
            },
            onSelected: (value) {
              setState(() {
                _selectedAnimal = value;
              });
            },
          ),
          const SizedBox(
            height: 30,
          ),
        ],
      ),),
    );
  }
}
```

</details>