skip to Main Content

I am using a DropdownButtonFormField in Flutter, and I’d like the hint text to be centered within the dropdown field. Currently, the hint text aligns to the bottom, which doesn’t fit with the rest of my UI design.

enter image description here

Here is my code:

import 'package:clearcommish/utils/constant/app_style.dart';
import 'package:flutter/material.dart';

class CustomDropdown extends StatelessWidget {
  final String labelText;
  final String hintText;
  final List<String> items;
  final String? selectedItem;
  final ValueChanged<String?> onChanged;

  const CustomDropdown({
    super.key,
    required this.labelText,
    required this.hintText,
    required this.items,
    required this.onChanged,
    this.selectedItem,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: AppStyle.padding(context, vertical: 10),
          child: Text(
            labelText,
            style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
          ),
        ),
        DropdownButtonFormField<String>(
          value: selectedItem,
          decoration: InputDecoration(
            hintText: hintText,
            hintStyle:
                AppStyle.lightSilverGilroy(fontSize: AppStyle.fontSize14),
            enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            errorBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            focusedErrorBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
          ),
          style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
          dropdownColor: Colors.white,
          items: items.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: onChanged,
        ),
      ],
    );
  }
}

Thank you in advance for any guidance!

I’ve tried adjusting the contentPadding and setting alignLabelWithHint: true within InputDecoration, but these haven’t centered the hint text as I expected. Is there a way to center the hint text in a DropdownButtonFormField, or are there any workarounds to achieve this effect?

2

Answers


  1. try this

    1. Remove the hint text style.
    2. add this
      hintText: null, hint: Center( child: Text( hintText, style: AppStyle.lightSilverGilroy(fontSize: AppStyle.fontSize14), ), ),
    3. and if it not works properly you can wrap center widget with padding and give it from left side.
    Login or Signup to reply.
  2. Try isDense: false, property of DropdownButtonFormField.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search