How can I align buttons in dropdown list menu items in flutter?

user_16627434 0
Viewed 134
          DropdownButton<String>(
            isExpanded: true,
            focusColor: Colors.white,
            value: ticketType,
            //elevation: 5,
            style: TextStyle(color: Colors.white),
            iconEnabledColor: Colors.black,
            items: _tickets.map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                  value: value,
                  child: Row(
                    children: [
                      Text(
                        value,
                        style: TextStyle(color: Colors.black),
                      ),
                      SizedBox(
                        width: (MediaQuery.of(context).size.width)-400,
                      ),
                      value != 'Add a Ticket'
                          ? Align(
                              child: IconButton(
                                  onPressed: () {
                                    setState(() {
                                      _tickets.remove(value);
                                    });
                                  },
                                  icon: Icon(Icons.close)),
                              alignment: Alignment.centerRight,
                              
                            )
                          : Container(),
                    ],
                  ));
            }).toList(),
            hint: Text(
              "Please Choose Ticket Type",
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                  fontWeight: FontWeight.w500),
            ),
            onChanged: (String value) {
              setState(() {
                ticketType = value;
              });
            },
          ),

I'm trying to add buttons to a dropdown list to remove the items. The buttons are working but, I'm having a problem aligning them. I have tried the align widget to align the buttons to the right side of the screen it didn't work. I've added a sized box between the buttons and the text for the buttons to be on the end. What can I do? Here is my output with sized box:

enter image description here

Here is my output without a sized box:

enter image description here

dart flutter
2 Answers

Use ListTile instead of Row for child property of DropdownMenuItem. ListTile has trailing which would take care alignment.

DropdownMenuItem(
  value: 1,
  child: ListTile(
    title: Text('1'),
    trailing: IconButton(
      icon: Icon(Icons.close),
      onPressed: () {},
    ),
  ),
),
user_45933150

On DropDownMenuItem Row use

mainAxisAlignment: MainAxisAlignment.spaceBetween,

OutPut result

it will look like this

 iconEnabledColor: Colors.black,
        items: _tickets.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
              value: value,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
user_101571270
Related