在文本字段内下拉颤动

Question

这是我目前拥有的：

我的设计/我想要的：

这是我的代码，这个大小的框是列的一部分，列是表单的一部分：

SizedBox(
                height: 80.0,
                child: Stack(alignment: Alignment.centerRight, children: [
                  TextFormField(
                      controller: null,
                      style: const TextStyle(color: Colors.white),
                      maxLength: 2,
                      decoration: InputDecoration(
                          fillColor: const Color(0xff353251),
                          filled: true,
                          hintText: 'ex. 5 hours',
                          contentPadding: const EdgeInsets.all(20.0),
                          hintStyle: const TextStyle(color: Colors.white24),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15.0)))),
                  DropdownButton(
                      value: goalValue,
                      dropdownColor: const Color(0xff403A4F),
                      style: const TextStyle(color: Colors.white),
                      onChanged: (String? value) {
                        setState(() {
                          goalValue = value!;
                        });
                      },
                      items: <String>['Per Week', 'Per Day', 'Per Month']
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList()),
                ]),
              ),

提前致谢！

Answer 1

我使用 Container 来代替 Stack 进行外部装饰，并使用 Row 来放置两个小部件。属性造型过程中发生了很多变化，并使用了随机颜色，玩弄造型。

现在结果是

Container(
  alignment: Alignment.center,
  padding: const EdgeInsets.only(left: 16),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    color: Color(0xff353251),
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      const Flexible(
        flex: 2,
        child: TextField(
          controller: null,
          style: TextStyle(color: Colors.white),
          maxLength: 2,
          buildCounter: null,
          decoration: InputDecoration(
            fillColor: Color(0xff353251),
            filled: true,
            counterText: "",
            hintText: 'ex. 5 hours',
            contentPadding: EdgeInsets.only(right: 4),
            hintStyle: TextStyle(color: Colors.white24),
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
          ),
        ),
      ),
      Flexible(
        flex: 1,
        child: Container(
          padding: EdgeInsets.only(right: 16, left: 16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            color: Colors.purpleAccent,
          ),
          child: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Colors.purpleAccent,
            ),
            child: DropdownButton(
                borderRadius: BorderRadius.circular(15.0),
                underline: const SizedBox(),
                icon: const SizedBox(),
                value: goalValue,
                style: const TextStyle(color: Colors.white),
                hint: const Text(
                  "select",
                  style: TextStyle(color: Colors.white),
                ),
                onChanged: (String? value) {
                  setState(() {
                    goalValue = value!;
                  });
                },
                items: <String>['Per Week', 'Per Day', 'Per Month']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList()),
          ),
        ),
      ),
    ],
  ),
),

在文本字段内下拉颤动

Drop down inside text field flutter

drop-down-menu

flutter