Question 419842 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can I edit the border of DropdownMenu() widget?

I recently shifted from using DropdownButton to using DropdownMenu widget in my flutter application, however I cannot seem to remove the border even after setting the border states.

DropdownMenu<T>(               
  initialSelection: value,
  dropdownMenuEntries: items ?? [], 
  onSelected: (selectedValue) {
    onChanged?.call(selectedValue); 
  },
  width: MediaQuery.of(context).size.width, 
  hintText: hintText,
  leadingIcon: leadingIcon,
  trailingIcon: trailingIcon,
  textStyle: AppTextStyles.textFieldValue,
  inputDecorationTheme: InputDecorationTheme(
    filled: true,
    fillColor: AppColors.white,
    hintStyle: AppTextStyles.textFieldValue.copyWith(
      color: AppColors.textFieldPrefix,
    ),
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: AppColors.textFieldBorder,
        width: 1.sp,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    constraints: BoxConstraints(maxHeight: height),
  ),
),

The code above just returns a black border around the dropdownMenu. Removing it then places a black underline border.

Container(           
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    border: Border.all(color: AppColors.textFieldBorder),
    borderRadius: BorderRadius.circular(10.r),
  ),
  child: DropdownMenu<T>(
    initialSelection: value, // Set the initial selection
    dropdownMenuEntries: items ?? [], // Pass the items
    onSelected: (selectedValue) {
      onChanged?.call(selectedValue); // Call the onChanged callback
    },
    width: MediaQuery.of(context).size.width, // Match the width

    hintText: hintText,
    leadingIcon: leadingIcon,
    trailingIcon: trailingIcon,
    textStyle: AppTextStyles.textFieldValue,
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: AppColors.white,
      hintStyle: AppTextStyles.textFieldValue.copyWith(
        color: AppColors.textFieldPrefix,
      ),
      
      constraints: BoxConstraints(maxHeight: height),
    ),
  ),
),

This displays the desired border, but places a black underline at the bottom

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Editing the outlineBorder (type BorderSide) property instead of the other border properties of type InputBorder fixed it.

    DropdownMenu<T>(
            enabled: isEnabled,
            enableFilter: enableFilter,
            enableSearch: enableSearch,
            initialSelection: value, // Set the initial selection
            dropdownMenuEntries: items ?? [], // Pass the items
            onSelected: (selectedValue) {
              onChanged?.call(selectedValue); // Call the onChanged callback
            },
            width: MediaQuery.of(context).size.width, // Match the width
            menuStyle: const MenuStyle(
              side: WidgetStatePropertyAll(BorderSide.none),
            ),
            hintText: hintText,
            leadingIcon: leadingIcon,
            trailingIcon: trailingIcon,
            textStyle: AppTextStyles.textFieldValue,
            menuHeight: menuHeight,
            inputDecorationTheme: InputDecorationTheme(
              filled: true,
              fillColor: AppColors.white,
              hintStyle: AppTextStyles.textFieldValue.copyWith(
                color: AppColors.textFieldPrefix,
              ),
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: AppColors.white,
                  width: 1.sp,
                ),
                borderRadius: BorderRadius.circular(10.r),
              ),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: AppColors.white,
                  width: 1.sp,
                ),
                borderRadius: BorderRadius.circular(10.r),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: AppColors.white,
                  width: 1.sp,
                ),
                borderRadius: BorderRadius.circular(10.r),
              ),
              outlineBorder: const BorderSide(color: AppColors.textFieldBorder),//This line fixed it to my exact usecase
              constraints: BoxConstraints(maxHeight: height),
            ),
          ),

  2. 0

    If you want to remove the underline border from the DropdownMenu, you can add border: InputBorder.none property to the inputDecorationTheme property of your DropdownMenu widget.

    Also, if you want to remove any border of your DropdownMenu, you can remove the border property of the Container widget.

    The provided code will be changed to:

    Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.r),
          ),
          child: DropdownMenu<T>(
            initialSelection: value, // Set the initial selection
            dropdownMenuEntries: items ?? [], // Pass the items
            onSelected: (selectedValue) {
              onChanged?.call(selectedValue); // Call the onChanged callback
            },
            width: MediaQuery.of(context).size.width, // Match the width

            hintText: hintText,
            leadingIcon: leadingIcon,
            trailingIcon: trailingIcon,
            textStyle: AppTextStyles.textFieldValue,
            inputDecorationTheme: InputDecorationTheme(
              border: InputBorder.none,
              filled: true,
              fillColor: AppColors.white,
              hintStyle: AppTextStyles.textFieldValue.copyWith(
                color: AppColors.textFieldPrefix,
              ),
              
              constraints: BoxConstraints(maxHeight: height),
            ),
          ),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search