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

Flutter – How to center an expanded dropdown button

I’m new to flutter. I have a drop down button that is expanded inside a row. How can I center the value and the icon visible on the screen? Here’s the problem I’m facing:

enter image description here

Here’s the code:

import 'package:flutter/material.dart';
import 'package:practice_app/constants.dart';

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

  @override
  State<StyledDropDownButton> createState() => _StyledDropDownButtonState();
}

class _StyledDropDownButtonState extends State<StyledDropDownButton> {
  String selectedCity = kCities.first;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //Other widgets
        Row(
          children: [
            Icon(Icons.location_city, color: Colors.grey[300]),
            const SizedBox(width: 16),
            Expanded(
              child: DropdownButton(
                value: selectedCity,
                items: [
                  ...kCities.map(
                    (city) => DropdownMenuItem(
                      value: city,
                      child: Text(city),
                    ),
                  ),
                ],
                onChanged: (value) {
                  setState(() {
                    selectedCity = value!;
                  });
                },
              ),
            ),
          ],
        )
      ],
    );
  }
}

The parent of this widget is scaffold -> materialApp.
How can I center the ‘Select your city’ and down arrow?

Tags:

2

Answers


  1. 0

    If you give me the code, I give to you exact solution. Unless you wanna give, you can do these codes

    DropdownButton(
  value: selectedValue,
  items: myItems.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(
        value,
        style: TextStyle(
          textAlign: TextAlign.center, // Center the text and arrow
        ),
      ),
    );
  }).toList(),
  onChanged: (newValue) {
    // Update the selected value
  },
),

    or

    Row(
  mainAxisAlignment: MainAxisAlignment.center, // Center the row
  children: [
    Expanded(
      child: DropdownButton(
        value: selectedValue,
        items: myItems.map((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
        onChanged: (newValue) {
          // Update the selected value
        },
      ),
    ),
  ],
),
    Login or Signup to reply.
  2. 0

    I set the isExpanded option of the dropdown button to true. Then I wrapped my items in a Center widget inside of my builder.

    return DropdownButton(
  isExpanded: true,
  value: widget.selectedId,
  items: buildItems(context, onSelectCallback),
);

    After

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search