Autocomplete widget goes out of screen from right side

https://api.flutter.dev/flutter/material/Autocomplete-class.html

From the code on flutter doc, If you add padding to AutocompleteBasicExample() widget the autocomplete box goes outside the screen from the right side.

Same issue In emulator

@ibrahimxcool

@ibrahimxcool
Tried the document example on latest stable using iphone simulator, which worked well I think:

Web also seems to be okay:

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.3, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.0.3 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 4d7946a68d (4 days ago), 2021-03-18 17:24:33 -0700
    • Engine revision 3459eb2436
    • Dart version 2.12.2

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.54.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.

Can you provide flutter doctor -v ?

@darshankawar

@darshankawar Please add Padding as a parent to the AutoComplete widget and the autocomplete box will ignore the padding as shown in my comment above.

Mobile:

Web:

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.206, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.1.0-13.0.pre.206 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 720dac5438 (2 hours ago), 2021-03-22 20:56:02 -0700
    • Engine revision d59a01d2d3
    • Dart version 2.13.0 (build 2.13.0-150.0.dev)

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.54.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.18.1

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • Mac OS X 10.15.4 19E2269
      darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.

This issue seems to be present in RawAutocomplete than with AutoComplete I tried with a minimal example

code snippet

Padding(
     padding: const EdgeInsets.all(16.0),
     child: RawAutocomplete(
          focusNode: focusNode,
          textEditingController: _controller,
          fieldViewBuilder: (BuildContext context,
              TextEditingController controller,
              FocusNode focusNode,
              VoidCallback onFieldSubmitted) =>
                  TextField(
                     controller: _controller,
                     focusNode: focusNode,
                  ),
          optionsBuilder: (TextEditingValue textEditingValue) {
               if (textEditingValue.text == '') {
                   return const Iterable<String>.empty();
              }
               return _kOptions.where((String option) {
                   return option.toLowerCase()
                           .contains(textEditingValue.text.toLowerCase());
                   });
               },
           optionsViewBuilder: (context, onAutoCompleteSelect, options) {
                return Material(
                     child: Container(
                      height: 100,
                      child: ListView.builder(
                        itemCount: _kOptions.length,
                        shrinkWrap: true,
                        itemBuilder: (x, y) => Material(
                            child: ListTile(
                          tileColor: Colors.red,
                          title: Text(_kOptions.elementAt(y)),
                          subtitle: Text("sample text"),
                          focusColor: Colors.red,
                          trailing: Icon(Icons.ac_unit_outlined),
                        )),
                      ),
                    ));
              }),
     );

This was the output

I temporarily published this third-party package https://pub.dev/packages/searchfield to deal with this issue.

I also experienced this but not with the Autocomplete widget

dropdown-issue.mp4

Here is a minimal reproducible example

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final TextEditingController _searchController;
  late final OverlayPortalController _overlayPortalController;

  final _suggestionsLayerLink = LayerLink();

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController();
    _overlayPortalController = OverlayPortalController();
  }

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

  void _openSearch() {
    _overlayPortalController.show();
  }

  void _closeSearch() {
    _overlayPortalController.hide();

    FocusManager.instance.primaryFocus?.unfocus();
  }

  @override
  Widget build(BuildContext context) {
    const border = OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black),
      borderRadius: BorderRadius.all(Radius.circular(4)),
    );

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Home not-so-sweet home'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CompositedTransformTarget(
                link: _suggestionsLayerLink,
                child: OverlayPortal(
                  controller: _overlayPortalController,
                  overlayChildBuilder: (BuildContext context) {
                    return _SearchBoxSuggestionsListView(
                      link: _suggestionsLayerLink,
                      suggestions: <String>[],
                    );
                  },
                  child: TextFormField(
                    controller: _searchController,
                    onTap: _openSearch,
                    onTapOutside: (_) => _closeSearch(),
                    decoration: InputDecoration(
                      border: border,
                      enabledBorder: border,
                      focusedBorder: border,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _SearchBoxSuggestionsListView extends StatelessWidget {
  const _SearchBoxSuggestionsListView({
    required this.link,
    required this.suggestions,
  });

  final LayerLink link;
  final List<String> suggestions;

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: CompositedTransformFollower(
        link: link,
        targetAnchor: Alignment.bottomLeft,
        child: ColoredBox(
          color: Colors.amber,
          child: SizedBox(
            width: double.infinity,
            height: 50,
          ),
        ),
      ),
    );
  }
}

@davidnwaneri

I'm still working on a fix in #143249.

@davidnwaneri That looks like the same root problem. You can see my PR for an idea of how to work around it.

@davidnwaneri

I'm still working on a fix in #143249.

@davidnwaneri That looks like the same root problem. You can see my PR for an idea of how to work around it.

Do you have idea when will the fix for autocomplete width be available? We're running into this issue with dialog in customer project and would be crucial to have it fixed in production code.

If we added an autocomplete widget to our overlord package at the Flutter Bounty Hunters, would people in this thread use it? Or is it important to you that you get this from Flutter and not from a community package?

To me it is important that this is fixed in flutter itself. I really dislike adding any 3rdparty flutter UI packages due usual lack of quality and configuration (I don't know how the package you mentioned scores on those).

Anyway, I think this discussion is a bit offtopic for this issue.

Autocomplete Options Width (#143249)

Autocomplete Options Width (flutter#143249)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Autocomplete Options Width (#143249)

Navigation Menu

Repository navigation

Autocomplete widget goes out of screen from right side #78746

50 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Autocomplete widget goes out of screen from right side #78746

Description

Activity

darshankawar commented on Mar 22, 2021

ibrahimxcool commented on Mar 22, 2021

darshankawar commented on Mar 23, 2021

maheshj01 commented on Apr 21, 2021

maheshj01 commented on Apr 22, 2021

50 remaining items

davidnwaneri commented on Aug 6, 2024

justinmc commented on Aug 6, 2024

miikalehtonen commented on Aug 8, 2024

wmadden commented on Sep 26, 2024

matthew-carroll commented on Sep 29, 2024

provokateurin commented on Sep 29, 2024

github-actions commented on Jan 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions