So I have a dropdown button, but the item text has different length, so when I choose different item, the text moves to a different position like shown in the picture. How should I fix that?

Here is the code:

Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        DropdownButton<TaskAssort>(
            value: _selected,
            icon: const Icon(Icons.arrow_drop_down),
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
              decoration: TextDecoration.none,
            ),
            isExpanded: true,
            onChanged: (TaskAssort? v) {
              _selected = v!;
              setState(() {});
            },
            items: [
              DropdownMenuItem(
                value: TaskAssort.Unfinished,
                child: Text(getAssortText(TaskAssort.Unfinished),
                    textAlign: TextAlign.end),
              ),
              DropdownMenuItem(
                value: TaskAssort.UnfinishedDaily,
                child: Text(getAssortText(TaskAssort.UnfinishedDaily),
                    textAlign: TextAlign.end),
              ),
              DropdownMenuItem(
                value: TaskAssort.Histroy,
                child: Text(getAssortText(TaskAssort.Histroy),
                    textAlign: TextAlign.end),
              ),
            ]),
      ],
    ),

CodePudding user response：

Set alignment of DropdownButton

alignment: Alignment.centerRight