How to remove dropdown if I click outside?

[Donaboyev]

[AyushTripathi28]

yes please add this too in next update

[AbdullahChauhan]

Hey @Donaboyev @AyushTripathi28 Currently, this behaviour is already added. Dropdown overlay should close if you tap outside. Can you guys explain your issue more?

[karniv00l]

I just noticed that after 3.0 upgrade, but only does that in certain scenarios

[AbdullahChauhan]

@karniv00l This not looks good. Can you please share the video so I can properly analyse whats happening...

[AbdullahChauhan]

Also on which platform you are using dropdown?

[karniv00l]

I'll try to write some example code when i have more time. Looks like it's platform independent (tested on macOS and Android). But as I mentioned, this is not present everywhere in my app, only in some parts

[karniv00l]

Ok, I found the issue

I'm currently using MediaQuery trick/hack to remove unnecessary left padding from ListTile and AppBar on mobile, and appears that this was causing the issue with the drop-down. I just needed to move the MediaQuery down the tree to make it work properly. Sorry for the confusion, this library is fantastic!

[AbdullahChauhan]

@karniv00l Ah, I see. No worries. Thanks for the appreciation :thumbsup:

[AyushTripathi28]

Hey @Donaboyev @AyushTripathi28 Currently, this behaviour is already added. Dropdown overlay should close if you tap outside. Can you guys explain your issue more?

const Expanded(child: DataEnvDropdown()), this is how i call this class

import 'dart:developer';

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';

const List<DataEnv> _list = [
  DataEnv('ICICI', Icons.developer_mode),
  DataEnv('MOSL', Icons.design_services),
  DataEnv('Oister', Icons.account_balance),
];

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

  @override
  Widget build(BuildContext context) {
    return CustomDropdown<DataEnv>(
      expandedFillColor: Colors.black,
      closedFillColor: Colors.black,
      initialItem: _list[0],
      hintText: 'Select Warehouse',
      items: _list,
      canCloseOutsideBounds: false,
      excludeSelected: true,
      onChanged: (value) {
        log('changing value to: $value');
      },
      closedBorderRadius: const BorderRadius.all(Radius.circular(5)),
      closedSuffixIcon: const Icon(Icons.arrow_drop_down),
      expandedSuffixIcon: const Icon(Icons.arrow_drop_up),
    );
  }
}

class DataEnv with CustomDropdownListFilter {
  final String name;
  final IconData icon;
  const DataEnv(this.name, this.icon);

  @override
  String toString() {
    return name;
  }

  @override
  bool filter(String query) {
    return name.toLowerCase().contains(query.toLowerCase());
  }
}

Issue is i call it in appbar and its working corectly but i cannot able to close it by tapping outside

[AbdullahChauhan]

@AyushTripathi28 You are calling this widget inside AppBar widget?

[AyushTripathi28]

No not in app bar I am calling it inside body

const Expanded(child: DataEnvDropdown()),

sorry for late reply .

[AyushTripathi28]

I got it actually i put canCloseOutsideBounds: false, but it should be true for this functionality.

[andikatp]

Hi, what if the dropdown is inside a modal which have a scaffold, and if i press anywhere outside the scaffold, the dropdown didnt close untitled.webm